HTML怎么添加滚动条_随笔

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<body>标签中，输入html代码：<div style="overflow: scroll">hello world!</div>。

3、浏览器运行index.html页面，此时成功在html中指定的div中添加了滚动条。

有时为了保持页面风格的统一，我们需要修改滚动条的样式。虽然我们可以通过 CSS 设置滚动条各部分的颜色样式，但这种方式不支持老版本的浏览器。而且不同的浏览器下，CSS 滚动条属性的写法也不一样，如果各个浏览器都需要兼容（特别是移动设备的浏览器），那就十分麻烦了。

这里推荐一个十分好用的滚动条插件： Nicescroll

NiceScroll 是一款完全基于 jQuery 框架的滚动条插件，它不仅有着类似 iOS 系统设备的滚动条外观，而且还支持任意的 <div>、<iframe>、<body>元素的滚动效果。

https://github.com/inuyaksa/jquery.nicescroll

（1）页面中引入 jquery.js

（2）页面中引入 jquery.nicescroll.js

（3）如果需要用到全屏放大功能的话，还要把 zoomico.png 复制到与 jquery.nicescroll.js 同一个文件夹下。

（1）我们只需在页面初始化完毕后，对需要使用这个滚动条插件的元素调用 niceScroll() 方法即可。

（2）这里我直接是让整个页面使用 NiceScroll 插件，默认情况下滚动条是自动隐藏的，即内容如果超出窗口时滚动条也不会显示。（当然此时通过鼠标滚轮还是可以滚动页面的）

（3）当鼠标移到窗口右侧时，滚动条则会显示出来。我们可以拖动它进行页面滚动。

这种方式由两个 DIV 组成，前一个为 vieport，后一个为里面内容。

如果遇到加载数据的时候 nicescroll 滚动条闪烁，还有对绝对定位的元素（例如下拉框）使用滚动条，特别是在需要滚动条比较多的页面，导致位置错乱的等问题。那么需要使用这个方法对设置滚动条的元素的直接子元素进行设置，比如：

注意：这个只是把滚动条隐藏，使用鼠标滚轮仍然可以进行滚动。

//水平方向滚动（距左侧100px）

//垂直方向滚动（距上方100px）

三、常用配置参数

在调用 niceScroll() 方法初始化滚动条时，我们可以传入一些参数属性，从而对滚动条的样式以及行为进行修改。

（1）这里我们对滚动条的颜色和触摸滚动模式进行的修改。

（2）效果图

（1）要开启全屏放大功能，只需把 boxzoom 参数设置为 true。（同时记得把 zoomico.png 放到与 jquery.nicescroll.js 同一个文件夹下）

（2）当我们将鼠标移到滚动区域右侧时，在滚动条旁边会显示出一个“放大”图标。点击后该区域会自动放大占满整个浏览器窗口。

（3）而当这个区域放大后，右上角的这个图标又会变成“缩小”图标，点击后该区域则又还原回原来的位置和尺寸。

欢迎分享，转载请注明来源：内存溢出

HTML怎么添加滚动条