当前位置：网站首页>PC端隐藏滚动条

PC端隐藏滚动条

2022-06-28 08:06:00 【庸懒】

在设置了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的盒子， 内部内容的尺寸和外部嵌套的盒子一样即可。

原网站

版权声明
本文为[庸懒]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_45279180/article/details/115761647

边栏推荐

猜你喜欢

随机推荐