移动端盒子超出部分滚动，但没有滚动条

野生java研究僧

于 2023-07-16 11:36:18 发布

阅读量1k

点赞数

分类专栏：前端文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_46188681/article/details/131748641

版权

前端专栏收录该内容

24 篇文章 1 订阅

订阅专栏

核心代码：

盒子{
    			overflow-y: scroll;
				-ms-overflow-style: none;
				overflow: -moz-scrollbars-none;
}
盒子::-webkit-scrollbar{
    			overflow-y: scroll;
				-ms-overflow-style: none;
				overflow: -moz-scrollbars-none;
}

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			.box {
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				width: 200px;
				height: 400px;
				border: 1px solid red;
				overflow-y: scroll;
				-ms-overflow-style: none;
				overflow: -moz-scrollbars-none;
			}

			.box::-webkit-scrollbar {
				width: 0 !important
			}
			p{
			 box-shadow: 0 0 10px #e1dcdc;
			 width: 150px;
			 height: 40px;
			 text-align: center;
			 line-height: 40px;
			}
		</style>
		<div class="box">
			<p>hello world</p>
			<p>hello world</p>
			<p>hello world</p>
			<p>hello world</p>
			<p>hello world</p>
			<p>hello world</p>
			<p>hello world</p>
			<p>hello world</p>
			<p>hello world</p>
			<p>hello world</p>
			<p>hello world</p>
		</div>
	</body>
</html>