css设置滚动条样式

林卤蛋

已于 2022-11-10 18:19:37 修改

阅读量312

点赞数

分类专栏：技术文档文章标签： css firefox javascript

于 2022-11-10 18:17:09 首次发布

本文链接：https://blog.csdn.net/ARLENE2/article/details/127793862

版权

技术文档专栏收录该内容

16 篇文章 0 订阅

订阅专栏

设置滚动条样式

/*滚动条样式*/
        ul::-webkit-scrollbar {/*滚动条整体样式*/
             4px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 4px;
        }
        ul::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.2);
        }
        ul::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 0;
            background: rgba(0,0,0,0.1);
        }

设置滚动条不显示

	ul {
		list-style: none;
		height: 100%;
		font-size: 13px;
		overflow: auto;
		scrollbar-width: none;  /* Firefox */
		-ms-overflow-style: none;  /* IE 10+ */
	}
	ul::-webkit-scrollbar {
		display: none;  /* Chrome Safari */
	}