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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3041498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 14:46:28  来源:igfitidea点击:

How to drag and scroll in a div with jQuery

jqueryscrolldraggable

提问by Don Munter

I've been looking around for some time now, but I can't find a way to combine these elements:

我已经环顾四周了一段时间,但我找不到结合这些元素的方法:

I want a 100% width div, with 1 row of elements. I need to scroll through this div, just like: http://jqueryfordesigners.com/demo/scrollable-timelines.html

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

So with a hidden overflow and such.

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

But now I want some sort of smooth ease when I let go of the mouseclick, so it'll be like a sort sweep. So when I drag the screen from left to right, and let go of the mouse, it'll move on for 1 sec and linearly slowing down. Hm, am I making sense?

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

Does anyone know of any scripts or some tips to put me back on track?

有没有人知道任何脚本或一些提示让我回到正轨?

Don

大学教师

回答by KajMagnus

Utterscrollis a drag and scroll library I've written: (EDIT: demo temporarily broken, seems a CDN link no longer works,)

Utterscroll是我写的一个拖动和滚动库:(编辑:演示暂时中断,似乎 CDN 链接不再有效,)

GitHub: https://github.com/debiki/utterscroll
GitHub hosted demo: http://rawgit.com/debiki/utterscroll/master/utterscroll-example.html

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

It differs from other libraries in that it 1) understands if you intend to select text, rather than scrolling (note that in the example linked to by the question, it's not possible to select text), and 2) it needs no, or almost no, configuration.

它与其他库的不同之处在于它 1) 了解您是否打算选择文本,而不是滚动(请注意,在问题链接的示例中,不可能选择文本),以及 2)它不需要,或者几乎不需要不,配置。

Utterscroll stops when you release the mouse though (just like Dragscrollable, in the answer above, does.)

但是,当您释放鼠标时,Utterscroll 会停止(就像 Dragscrollable 一样,在上面的答案中也是如此。)