js利⽤overflow属性,设置滚动条,隐藏或设置样式页⾯滚动条设置 overflow属性
想要给 页⾯哪个部分 或者 哪个盒⼦添加滚动条,
可以利⽤ overflow属性,先看看它的基本属性。
浏览器⽀持情况如上图。
属性值有如下:
想要添加滚动条,必须给盒⼦添加⾼度(*)
例如 在x轴上隐藏内容,y轴上显⽰滚动条
.div {
height: 300px
overflow-x: hidden;
overflow-y: auto;
}
基本设置
1. 可以滚动但是不让显⽰滚动条
.div::-webkit-scrollbar {
display: none;
}
2.⼿动设置滚动条样式
滚动条区域的宽度
.div::-webkit-scrollbar {
width:4px;
}
/* 滚动槽的样式设置 */
.div::-webkit-scrollbar-track {
-webkit-box-shadow:inset 0 0 6px rgba(255,255,255,0.5); }
/* 滚动条滑块的样式设置 */
.div::-webkit-scrollbar-thumb {
background:rgba(0,0,0,0.1);
-webkit-box-shadow:inset 0 0 6px rgba(39,167,148);
}
.div::-webkit-scrollbar-thumb:window-inactive {
background:rgba(255,0,0,0.4);
}
js控制滚动条例⼦样式设置的滚动条样式如图:

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