关注微信公众号 太平洋学习网 扫描二维码
最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

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

JS/CSS 太平洋学习网 浏览 评论

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

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

<div id="wrapper">
    <ul>
        <li>...</li>
        <li>...</li>
        ...省略
    </ul>
</div>

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

<script type="text/javascript" src="asset/lib/iscroll.js"></script>

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

<script type="text/javascript">
    //初始化scroll
    var myScroll = new IScroll("#wrapper");
</script>

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

iscroll

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

<script type="text/javascript">
 //初始化scroll
 var myScroll = new IScroll('.datika-wapper', {
  mouseWheel: true,
  scrollbars: true
 })
</script>

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

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

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

QQ截图20171202213434.jpg

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

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

    与本文相关的文章