可通过拖动鼠标进行页面滚动的js插件

当前位置:主页 > jQuery库 > 布局和界面 > 可通过拖动鼠标进行页面滚动的js插件
可通过拖动鼠标进行页面滚动的js插件
分享:

    插件介绍

    dragscroll是一款非常小巧的可通过拖动来进行滚动的js插件。该拖动滚动插件的min版本只有410个字节。通过该插件你可以将整个页面或某个div转换为可用鼠标拖动来滚动的元素。这对于某些场合的展示效果是非常有用的。

    浏览器兼容性

    浏览器兼容性
    时间:03-25
    阅读:
简要教程

dragscroll是一款非常小巧的可通过拖动来进行滚动的js插件。该拖动滚动插件的min版本只有410个字节。通过该插件你可以将整个页面或某个div转换为可用鼠标拖动来滚动的元素。这对于某些场合的展示效果是非常有用的。

dragscroll的最小版本dragscroll_micro.js大小为410个字节,仅支持基本的拖放滚动功能。

dragscroll的完整版本dragscroll.js大小有741个字节,它比最小版本多了一些额外的功能:

  • 添加了一个UMD模块。
  • 可以在页面加载后才被调用,插件会自动查找带有dragscroll class的元素,并将这些元素进行转换。最小化版本不能再页面初始化之后再加载,必须写在页面的<head>中。
  • 可以动态的添加或删除带有dragscroll class的元素。如果你执行了这些操作,要使用dragscroll.reset()方法来更新元素。

使用方法

要使用该鼠标拖动滚动元素js插件,先要在页面中引入dragscroll_micro.jsdragscroll.js文件。

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

然后在你需要进行拖动滚动的元素上添加class dragscroll

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

就这么简单,现在这个元素就可以进行鼠标拖动滚动了。你也可以在<body>元素上添加dragscroll,使整个页面都可以进行鼠标拖动滚动。