Javascript 当窗口调整大小时，可拖动对象会超出容器

我尝试使用JQueryUI中的拖放/可拖动功能创建一个自定义滚动条

我做了这个JSFIDLE：

HTML

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

Javascript

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

它工作得很好，但有时当我调整窗口大小时，可拖动对象会超出父元素，我希望避免这种情况

---

解决这个问题最简单的方法是什么？我可以使用

resize（）

事件，但可能有更好的解决方案。

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

$("#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 + '%');
  }
});

---

我认为使用resize（）事件更容易solution@TimB谢谢你的回答，如果没有人有更好的解决方案，我会使用resize。我正在考虑这个解决方案，然后我看到了你的答案。非常感谢：）这只适用于以百分比而不是像素表示的可拖动对象。

$("#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 + '%');
  }
});