设置滚动条

滚动条

滚动条用法

overflow-y：当区域内容超过其指定高度时对滚动条的管理；

overflow-x：当区域内容超过其指定宽度时对滚动条的管理；

overflow：相当于同时设置overflow-x和overflow-y

参数:

visible：扩大面积以显示所有内容

auto：仅当内容超出限定值时添加滚动条

hidden：总是隐藏滚动条

scroll：总是显示滚动条

注意！

1、滚动条的设置只对设置了固定宽（或高）的块级区域有效（因为只有块级区域能设置宽高）。当设置显示滚动条时，只有当块级内容区域超出块级元素范围的时候，就会以滚动条的形式展示，你可以滚动里面的内容，里面的内容不会超出块级区域范围。

2、设置滚动条时，一般只设置横向滚动条和纵向滚动条的其中一个。因为当超过区域时设置了滚动条显示，当纵向能延展时，横向也能延展就会出现问题。其中一个滚动条就不能在页面上显示。例如下图，横向滚动条就不能正确显示。当页面视口有滚动条时，自己在页面上有超过视口会显示的滚动条，则互相冲突，自己写的块级区域内滚动条不能正确显示。

3、当想完全隐藏整个浏览器视口的滚动条时，要用scroll=“no”，可隐藏滚动条;

滚动条样式修改

因为每个浏览器默认的滚动条不一样，自己在页面上使用滚动条时，可以对滚动条做样式的修改。

  <style> .bar {
       height: 300px; width: 250px; overflow-y: scroll; border: 1px solid #ccc; margin-left: 400px; margin-top: 50px; } /* 设置滚动条的样式 宽高、背景色*/ ::-webkit-scrollbar {
       width: 10px; background-color: rgb(239, 217, 217); } /* 滚动条滑块 */ ::-webkit-scrollbar-thumb {
       border: 1px solid red; border-radius: 10px; background: pink; } </style>

修改了样式之后的滚动条（为了方便观看颜色比较夸张，不美观，但便于区分）