当前位置：网站首页>Hidden scroll bar on PC

Hidden scroll bar on PC

2022-06-28 08:13:00 【Mediocrity and laziness】

In setting up the overflow：auto Using pseudo element selectors on elements of ::-webkit-scrollbar, See the following examples for specific use 

		<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>

If you need to be compatible with other browsers, you can use the following method 

.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>

In essence, it is to put another one on the outermost layer overflow:hidden Box , The size of the inner content is the same as that of the outer nested box .

原网站

版权声明
本文为[Mediocrity and laziness]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/179/202206280806202883.html

边栏推荐

猜你喜欢

随机推荐