上一篇：CSS中div垂直排列和水平排列效果的代码是什么下一篇：如何实现HTML页面input只输入数字

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

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>

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

如果想要显示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文件在如下位置。

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

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

标签： div垂直滚动条

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：CSS中div垂直排列和水平排列效果的代码是什么下一篇：如何实现HTML页面input只输入数字