Question

我尝试使用JQueryUI中的拖放＆拖放/拖动功能制作自定义滚动条

我做了这个JSFiddle：

HTML

<div id="scrollbar-zone" class="w85pc">
  <div id="scrollbar" style=""></div>
</div>

CSS

.w85pc{
  width: 80%;
  margin: 0 auto;
}

#scrollbar-zone{
    border: 1px solid black;
    height: 30px;
}

#scrollbar{
    border: 1px solid red;
    height: 100%;
    width: 10px;
}

的Javascript

$("#scrollbar").draggable({
    axis: "x",
    containment: 'parent'
});

它工作正常，但有时当我调整窗口大小时，可拖动对象会离开父元素，我想避免这种情况。

解决此问题的最简单方法是什么？我可以使用resize()事件，但可能有更好的解决方案。

Answer 1

您可以在停止事件中将位置转换为百分比，因此在调整滚动条大小时将保持其比例位置。像这样：

$("#scrollbar").draggable({
  axis: "x",
  containment: 'parent',
  stop: function(e, ui) {
    var perc = ui.position.left / ui.helper.parent().width() * 100;
    ui.helper.css('left', perc + '%');
  }
});

http://jsfiddle.net/axmgm2j2/

调整窗口大小时，可拖动对象会移到容器外部

1 个答案: