我正在创建一个 jQuery 滚动条，它滚动
中的内容。这就像jQuery 滚动窗格 http://jscrollpane.kelvinluck.com/.
我已经到了需要移动滚动按钮的地步。我的问题是：在没有任何 UI 插件的情况下，最好的方法是什么？因此，当用户单击滚动按钮时，可以通过 mousedown 事件在其父容器中垂直移动滚动按钮。我怎么能这么做呢？
这是一个起点，希望这就是您所追求的：
$(function() {
$('.slider').slider();
});
$.fn.slider = function() {
return this.each(function() {
var $el = $(this);
$el.css('top', 0);
var dragging = false;
var startY = 0;
var startT = 0;
$el.mousedown(function(ev) {
dragging = true;
startY = ev.clientY;
startT = $el.css('top');
});
$(window).mousemove(function(ev) {
if (dragging) {
// calculate new top
var newTop = parseInt(startT) + (ev.clientY - startY);
//stay in parent
var maxTop = $el.parent().height()-$el.height();
newTop = newTop<0?0:newTop>maxTop?maxTop:newTop;
$el.css('top', newTop );
}
}).mouseup(function() {
dragging = false;
});
});
}
.container{
position:relative;
border:1px solid red;
height:100px;
}
.slider{
height:20px;
width:20px;
background:green;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="container">
<div class="slider" />
</div>
</div>
<br/>
<div class="container">
<div class="slider" />
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
