在实际应用中，我们有时候会遇到“HTML页面中div内部如何实现垂直滚动条？”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“HTML页面中div内部如何实现垂直滚动条？”文章能帮助大家解决问题。

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

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

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

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

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

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

<scripttype="text/javascript">
//初始化scroll
varmyScroll=newIScroll("#wrapper");
</script>

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

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

<scripttype="text/javascript">
//初始化scroll
varmyScroll=newIScroll('.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文件在如下位置。

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

上述内容具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多"HTML页面中div内部如何实现垂直滚动条？"的内容，大家可以关注博信的其它相关文章。