怎样阻止页面滚动穿透

最新推荐文章于 2024-11-07 09:27:31 发布

一只大海

最新推荐文章于 2024-11-07 09:27:31 发布

阅读量3k

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_44392418/article/details/103179991

版权

前端专栏收录该内容

10 篇文章

订阅专栏

在前端开发中，当打开长页面上的弹框时，可能会遇到遮罩层后面页面仍可滚动的问题，即滚动穿透。为了解决这个问题，可以在触发弹框时，给最外层div添加特定样式来禁止页面滚动。通过示例代码和实际效果展示了解决滚动穿透的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前端的开发中，经常会遇到长页面和弹框，触发弹框，会出现遮罩层后面的页面依旧可以滚动，此时就出现了滚动穿透，如何处理呢？

解决方法：
触发弹框时，给最外层的div添加样式
话不多说，上代码

	.prevent_touch_move_box {
		position: fixed ;
		overflow: hidden;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

示例：

<template>
	<!-- 最外层 -->
	<view class="box" :class="show?'prevent_touch_move_box':''">
		<!-- 页面内容 -->
		<view class="content_box" v-for="(item,index) in 20" :key='index' @click="showMessageBox()">
			我是内容,点击我弹框
		</view>
		<!-- 弹框 -->
		<view class="message_box" v-if="show" @click="closeMessageBox()">
			<view class="elastic_frame">
				我是弹框
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: false
			}
		},
		methods: {
			// 显示弹框
			showMessageBox() {
				this.show = true
			},
			// 关闭弹框
			closeMessageBox() {
				this.show = false
			}
		}
	}
</script>
<style>
	/* 防止出现滚动 穿透*/
	.prevent_touch_move_box {
		position: fixed;
		overflow: hidden;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

	.box {
		width: 100%;
	}

	.content_box {
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		background: #BBBBBB;
		margin-top: 10px;
	}

	.message_box {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.2);
		position: fixed;
		top: 0;
		left: 0;
	}

	.elastic_frame {
		width: 100px;
		height: 60px;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 50% auto 0;
		text-align: center;
		line-height: 60px;
	}
</style>

效果图
在这里插入图片描述