PC端设置滚动条

庸懒

已于 2022-08-12 17:06:40 修改

阅读量1k

点赞数 1

分类专栏：笔记文章标签： css3

于 2021-04-16 15:22:47 首次发布

本文链接：https://blog.csdn.net/qq_45279180/article/details/115761647

版权

笔记专栏收录该内容

39 篇文章 8 订阅

订阅专栏

隐藏滚动条

在设置了overflow：auto的元素上使用伪元素选择器::-webkit-scrollbar,具体使用可看下面案例

		<style type="text/css">
			.li-group {
				width: 500px;
				height: 300px;
				border: 1px solid red;
				overflow-y: auto;

			}

			.li-group::-webkit-scrollbar {
				display: none
			}

			li {
				width: 100%;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<ul class="li-group">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
		</ul>
	</body>

如果需要兼容其他浏览器可以使用下面的方法

.outer-container,.content {
    width: 200px; height: 200px;
}
.outer-container {
    position: relative;
    overflow: hidden;
}
.inner-container {
    position: absolute; left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}
 
.inner-container::-webkit-scrollbar {
    display: none;
}

<div class="outer-container">
     <div class="inner-container">
        <div class="content">
            ......
        </div>
     </div>
 </div>

本质上就是在最外层再套一个overflow:hidden的盒子，内部内容的尺寸和外部嵌套的盒子一样即可。

自定义滚动条样式

我们在使用各种组件库的时候可以看到组件库的滚动条的样式都挺好看的，和原生的比起来真的是有天壤之别

上面就是element官网的样式，可以看到滚动条样式还是很不错的。

滚动条设置属性

首先我们得知道如何去设置滚动条而不是简单的隐藏，除了使用::-webkit-scrollbar伪元素外我们还可以使用一下伪元素来对滚动条进设置：

::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式

通过上面的一些伪元素我们就可以做一个类似ElementUI官网滚动条的例子：

 .content-box {
      height: 260px;
      overflow-y: auto;
      &::-webkit-scrollbar {
        width: 6px;
        border: 1px solid transparent;
      }
      &::-webkit-scrollbar-button {
        display: none;
      }
      &::-webkit-scrollbar-thumb {
        background: #dddddd;
        border-radius: 3px;
      }
    }