java垂直滚动条_iScroll实现div垂直滚动条示例|iScroll使用方法讲解

html网页内容过长，会自动拥有垂直滚动条，那么div内部如何实现垂直滚动条呢？这个就需要用到iScroll这个插件了，下面将来实现一个div垂直滚动条示例，用来初步了解|iScroll使用方法。

首先我们新建一个div的容器，div内部会有一个垂直滚动条的，html代码如下。

• ...
• ...

...省略

引入iScroll.js插件，js引入方式如下，请根据自己的项目路径引入。

初始化iScroll对象，这个时候如果div内部数据过多，div就会自动拥有向下滚动的功能，默认的初始化iScroll的方法是不显示垂直滚动条的，代码如下。

//初始化scroll

var myScroll = new IScroll("#wrapper");

上面的示例运行之后会有类似如下的滚动效果，如图所示。

如果想要显示div垂直滚动条的话，可以在iScroll初始化的时候加入scrollbars属性，js初始化代码如下。

//初始化scroll

var myScroll = new IScroll('.datika-wapper', {

mouseWheel: true,

scrollbars: true

})

mouseWheel：true表示div垂直滚动条将会支持鼠标滚轮上下滑动。

scrollbars：true表示div右侧将会显示滚动条

带滚动条的div垂直滚动效果就不演示了，iScroll插件的下载地址：https://github.com/cubiq/iscroll/archive/master.zip，iscroll.js文件在如下位置。

其它几个文件不需要管它，我们用不到，只需要将iscroll.js引入到您的项目中即可。

来源网站：太平洋学习网，转载请注明出处：http://www.tpyyes.com/a/js_css/419.html