弹窗显示时背景滚动处理

最新推荐文章于 2023-10-26 18:20:13 发布

wendyTan10

最新推荐文章于 2023-10-26 18:20:13 发布

阅读量918

点赞数

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

本文链接：https://blog.csdn.net/weixin_42369598/article/details/122223171

版权

css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

项目中存在的问题： position：fixed的弹窗显示时，背景的内容仍然可滚动？
以往的解决方案: 采取js的方式将overflow：hidden；

根本原因是： position：fixed是相对根元素(html)，而页面的滚动条是overflow生成
解决方案: 弹窗时锁定背景不进行滚动，可设html的overflow：hidden，然后将滚动条给相对应的body或整个大包裹的div元素

<style>
	html {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	body {
		height: 100;
		overflow: scroll;
	}
	.fix {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, .48);
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		z-index: 9;
	}
	.fix>div {
		width: 200px;
		line-height: 50px;
		background: #fff;
		border-radius: 10px;
	}
</style>
<body>
	<div class='fix'>
		<div>弹窗的显示内容</div>
	</div>
</body>