javascript div滚动条 js设置滚动条样式

页面滚动条设置 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);
}

例子样式设置的滚动条样式如图：