实现按住鼠标拖动滚动:dragscroll

jopen 10年前

Dragscroll是一个很小的javascript库(978 bytes minified),能够通过实现按住鼠标拖动实现页面滚动(drag-n-drop style, online demo).

用法

Download the distribution, unpack it and load thedragscroll.jsin a preferrable way. That is an UMD module, thus for instance it may simply be loaded as a plain JavaScript file using the<script>tag:

<script src="dragscroll.js"></script>

Add thedragscrollclass to a scrollable element:

<div class=dragscroll>      Big text goes here...  </div>

That's it! Now you can scroll it by dragging. You can also add thedragscrollclass to the<body>element and drag the whole page.

Keep in mind that now it is not possible to select the content with mouse, so apply thecursor: default;CSS style to prevent confusing the users (or evencursor: grab;in case the content is not a text).

If you add (or remove) thedragscrollclass after the page was loaded, invokedragscroll.reset()to update the listeners.

项目主页:http://www.open-open.com/lib/view/home/1427082176559