[英]Range Slider control Scrollable Div
我有以下问题:我想使用 HTML 范围滑块来控制在下方水平滚动的 div 的位置。 (基本上是滚动条功能,但一旦进入网站,它就会远离可滚动内容。)要查看视觉效果,请参阅我的 CodePe: http ://codepen.io/Auzy/pen/qrXYYK?editors=1111(我使用Pug 和 Stylus,要查看正常的 HTML,请单击右侧的下拉箭头并选择“查看编译的 HTML”)到目前为止我的代码不起作用,但它提供了我正在尝试执行的操作的基本概念:
JS:
(function() {
window.RangeScroll = (function() {
RangeScroll.init = function() {
return $('.range-scroll').each(function(idx, el) {
return new RangeScroll($(el));
});
};
function RangeScroll($el) {
this.limit = 0;
this.length = 0;
this.scroll = $el;
this.output = $el.find('.scroll-output');
this.range = $el.find('.scroll-range');
this.panel = $el.find('.scroll-panel');
this.content = $el.find('.scroll-content');
this._calc_range();
this._add_events();
}
RangeScroll.prototype._calc_range = function() {
this.limit = this.panel.outerWidth();
return this.length = this.content.outerWidth();
};
RangeScroll.prototype._add_events = function() {
return this.range.on('input', (function(_this) {
return function(ev) {
var $el, val;
ev.preventDefault();
$el = $(ev.currentTarget);
val = $el.val();
return _this.change_range(val);
};
})(this));
};
RangeScroll.prototype.change_range = function(val) {
var ratio;
ratio = -((val * .01) * (this.length - this.limit));
this.output.val(val);
return this.content.css({
'transform': "translateY(" + ratio + "px)",
'-webkit-transform': "translateY(" + ratio + "px)",
'-moz-transform': "translateY(" + ratio + "px)",
'-ms-transform': "translateY(" + ratio + "px)"
});
};
return RangeScroll;
})();
$(function() {
if ($('.range-scroll').length) {
return RangeScroll.init();
}
});
}).call(this);
HTML:
<form class="rangeSlider">
<input class="scroll-range" id="scroll-range" type="range"/>
</form><br/>
<div class="range-scroll">
<div class="bems-scroller scroll-panel">
<div class="scroll-content" id="scrolling-container">
<li><img src="http://placekitten.com/200/125"/>
<div class="title">name and more</div>
</li>
<li><img src="http://placekitten.com/200/125"/>
<div class="title">name and more</div>
</li>
<li><img src="http://placekitten.com/200/125"/>
<div class="title">name and more</div>
</li>
<li><img src="http://placekitten.com/200/125"/>
<div class="title">name and more</div>
</li>
<li><img src="http://placekitten.com/200/125"/>
<div class="title">name and more</div>
</li>
<li><img src="http://placekitten.com/200/125"/>
<div class="title">name and more</div>
</li>
<li><img src="http://placekitten.com/200/125"/>
<div class="title">name and more</div>
</li>
<li><img src="http://placekitten.com/200/125"/>
<div class="title">name and more</div>
</li>
<li><img src="http://placekitten.com/200/125"/>
<div class="title">name and more</div>
</li>
<li><img src="http://placekitten.com/200/125"/>
<div class="title">name and more</div>
</li>
<li><img src="http://placekitten.com/200/125"/>
<div class="title">name and more</div>
</li>
<li><img src="http://placekitten.com/200/125"/>
<div class="title">name and more</div>
</li>
<li><img src="http://placekitten.com/200/125"/>
<div class="title">name and more</div>
</li>
<li><img src="http://placekitten.com/200/125"/>
<div class="title">name and more</div>
</li>
<li><img src="http://placekitten.com/200/125"/>
<div class="title">name and more</div>
</li>
<li><img src="http://placekitten.com/200/125"/>
<div class="title">name and more</div>
</li>
<li><img src="http://placekitten.com/200/125"/>
<div class="title">name and more</div>
</li>
<li><img src="http://placekitten.com/200/125"/>
<div class="title">name and more</div>
</li>
<li><img src="http://placekitten.com/200/125"/>
<div class="title">name and more</div>
</li>
<li><img src="http://placekitten.com/200/125"/>
<div class="title">name and more</div>
</li>
</div>
</div>
</div>
从字面上看,您只需要像 javascript 一样的东西:(在您上线时删除 console.log)
var scroll = document.getElementById("scroll-range");
scroll.oninput = function () {
console.log(this.value);
var panel = document.getElementById("scrolling-container");
panel.scrollLeft = this.value;
}
目前它只是稍微移动了 div,但由于我对 pug 和手写笔非常不熟悉,所以不能做太多。 但我想你明白了。 不应该太难实现你想要的。
代码笔: http ://codepen.io/anon/pen/evEKRK?editors=1111
这个适用于您想要的:
var scroll = document.getElementById("scroll-range");
scroll.oninput = function () {
var panel = document.getElementById("scrolling-container");
var total = panel.scrollWidth - panel.offsetWidth;
var percentage = total*(this.value/100);
console.log(total);
panel.scrollLeft = percentage;
//console.log(percentage);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.