如何使用 jQuery 在 div 中拖动和滚动 [英] How to drag and scroll in a div with jQuery

问题描述

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

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

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

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

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

So with a hidden overflow and such.

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

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?

有谁知道让我重回正轨的任何脚本或提示?

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

唐

推荐答案

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

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

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

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

它与其他库的不同之处在于它 1) 了解您是否打算选择文本，而不是滚动(请注意，在 问题链接的示例，无法选择文本)，2)不需要或几乎不需要配置.

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.

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

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

这篇关于如何使用 jQuery 在 div 中拖动和滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！