⽹页中滚动条的设置和修改
⼀、通过css设置滚动条
在所有浏览器，滚动条可定制性最强的当属webkit内核的浏览器了。因为源代码开放的原因，市⾯上基于webkit内核的浏览器也是很难穷举完。例如有：Google Chrome、Opera（opera最近宣布使⽤webkit内核了）、360极速浏览器，猎豹浏览器等，搜狗浏览器……
下⾯我们来看⼀下webkit浏览器是如何强⼤的吧！⾸先来了解它的属性:
1. ::-webkit-scrollbar 滚动条整体部分，可以设置宽度等
2. ::-webkit-scrollbar-button 滚动条两端的按钮
3. ::-webkit-scrollbar-track  外层轨道
4. ::-webkit-scrollbar-track-piece  内层滚动槽
5. ::-webkit-scrollbar-thumb 滚动的滑块
6. ::-webkit-scrollbar-corner 边⾓
7. ::-webkit-resizer 定义右下⾓拖动块的样式
::-webkit-scrollbar ：滚动条整体部分，其中的属性: width,height,background,border等。
::-webkit-scrollbar-button ：滚动条两端的按钮。可以⽤display:none让其不显⽰，也可以添加背景图⽚，颜⾊改变显⽰效果。
css设置表格滚动条
::-webkit-scrollbar-track ：外层轨道。可以⽤display:none让其不显⽰，也可以添加背景图⽚，颜⾊改变显⽰效果。
::-webkit-scrollbar-track-piece ：内层轨道，具体区别看下⾯gif图，需要注意的就是它会覆盖第三个属性的样式。
::-webkit-scrollbar-thumb ：滚动条⾥⾯可以拖动的那部分
::-webkit-scrollbar-corner ：边⾓，两个滚动条交汇处
::-webkit-resizer ：两个滚动条交汇处⽤于拖动调整元素⼤⼩的⼩控件（基本⽤不上）
⼆、div定位叠加隐藏实现
在页⾯中想要实现⼀个固定⼤⼩区域的内容纵向滚动，此区域的内容是动态渲染的，也就是内容可以在通过后台编辑修改。当内容较少时，如果出现滚动条会影响页⾯的美观。我们可以设置超出隐藏滚动条的⽅法实现。
html结构：
<div class="wrap">
<div class="container">
<p>多年来公司坚持科技创新，与时俱进，为众多国内外著名五星级酒店设计和制造智能控制系统和智能开关⾯板。
在⾏业中，我司⾸家实现了模块化、⾃主编程的通⽤型酒店客房电器控制系统，
在此基础上再创新建⽴智控云控智能服务系统，实现对各种灯具的调光、灯光场景、窗帘、空调、
红外及各种传感器进⾏综合控制和遥控。在智能控制⾯板⽅⾯，我司拥有品种规格众多、功能齐全、设计新颖的系列产品，
并根据客户的需求对智能开关⾯板进⾏个性化设计，深受⽤户青睐。
</p>
</div>
</div>
CSS样式：
.wrap{
width: 450px;
height: 300px;
overflow: hidden;
}
.container{
width: 460px;
overflow-y: scroll;
height: 100%;
}
总结：
1、外层元素必须设置overflow：hidden；
2、内层元素必须设置overflow-y：scroll；
3、内层的宽度必须⼤于外层的宽度，且正好把滚动条给遮住；
4、内层height：100%；才能有滚动效果；
效果展⽰：
三、利⽤插件:jquery.nicescroll.js
nicescroll 滚动条插件是⼀个⾮常强⼤的基于 jQuery 的滚动条插件，不需要增加额外的css，⼏乎全浏
览器兼容。ie6+，实现只需要⼀段代码，侵⼊性⾮常⼩，样式可完全⾃定义，⽀持触摸事件，可在触摸屏上使⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。