滚动条
滚动条用法
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>
修改了样式之后的滚动条(为了方便观看颜色比较夸张,不美观,但便于区分)