如何使用 jQuery 在 div 中拖动和滚动

Posted 2023-05-08

【中文标题】如何使用 jQuery 在 div 中拖动和滚动

【英文标题】：How to drag and scroll in a div with jQuery

【发布时间】：2011-03-03 18:14:08

【问题描述】：

我已经四处寻找了一段时间，但我找不到组合这些元素的方法：

我想要一个 100% 宽度的 div，其中包含 1 行元素。我需要滚动浏览这个 div，就像：http://jqueryfordesigners.com/demo/scrollable-timelines.html

所以有一个隐藏的溢出等等。

但是现在我想在松开鼠标点击时获得某种平滑的轻松感，所以它就像一个排序扫描。因此，当我从左向右拖动屏幕并松开鼠标时，它会继续移动 1 秒并线性减速。嗯，我说得有道理吗？

有没有人知道任何脚本或一些提示可以让我重回正轨？

不要

【问题讨论】：

该演示的一个非常烦人的事情是，如果您单击并移动鼠标进行滚动，并且当它在内容框外时释放鼠标按钮，那么它会像您的鼠标按钮一样当你的光标重新进入内容框的时候还是被压抑，给人一种滚动失控的感觉。

【参考方案1】：

Utterscroll 是我编写的一个拖动和滚动库：（编辑：演示暂时损坏，似乎 CDN 链接不再有效，）

GitHub：https://github.com/debiki/utterscroll GitHub 托管演示：http://rawgit.com/debiki/utterscroll/master/utterscroll-example.html

它与其他库的不同之处在于 1) 了解您是否打算选择文本，而不是滚动（请注意，在 the example linked to by the question 中，无法选择文本），以及 2) 它不需要或几乎不需要, 配置。

当您释放鼠标时，Utterscroll 会停止（就像 Dragscrollable，在上面的答案中一样。）

【讨论】：

为什么有人反对这个？如果您留下评论和解释，或者在 GitHub 上提交问题，我将不胜感激。

@Kragalon 哦，我没注意到。可通过 www.debiki.com 访问的演示确实已损坏。但是这个托管在 GitHub 上的演示可以运行：rawgit.com/debiki/utterscroll/master/utterscroll-example.html——我刚刚在上面添加了那个链接。