CSS 局部滚动和修改滚动条样式

最新推荐文章于 2024-10-16 22:10:28 发布

龍の蝶

最新推荐文章于 2024-10-16 22:10:28 发布

阅读量6k

点赞数 3

分类专栏： Web前端文章标签： CSS

本文链接：https://blog.csdn.net/qq_40313878/article/details/81780443

版权

Web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

局部滚动和修改滚动条样式

部分区域滚动

/* --- 不滚动部分 --- */
#box{
    overflow: hidden;
    height: 100%;
}
/* --- 滚动部分 --- */
.scroll-area{
    -webkit-overflow-scrolling: touch;
    overflow-y:scroll;//overflow-x 横屏滚动 overflow-y 竖屏滚动
    white-space: nowrap;
}

修改滚动条样式

/* --- 改变滚动条样式 --- */
.scroll-area::-webkit-scrollbar {
	width: 10px;
}

/* --- 滚动条里面的滚动块 --- */
.scroll-area::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 5px #eee;
	background: #eee;
}

/* --- 滚动条里面轨道 --- */
.scroll-area::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	 border-radius: 10px;
	background: #FFEB3B;
	/* border: none;
	background: none; */
}