微信小程序中如何避免自定义弹出层滑动时底层页面滚动-快创小站

弹窗滑动导致页面滚动问题解决方案

　　在过程中，经常会遇到弹窗滑动时，底层页面也跟着滚动的情况。这不仅影响用户体验，还可能导致页面布局错乱。下面我们从不同场景出发，提供几种解决方案，帮助你轻松搞定这个问题。

场景一：弹窗内无滚动内容

　　如果弹窗内没有需要滚动的内容，可以通过阻止事件冒泡来解决。具体做法是在弹窗的最外层元素上绑定事件，触发事件时返回 false，或者在类框架中使用 .preventDefault() 来阻止默认行为。

　　简单写法如下：

function preventScroll(event) {

event.preventDefault();

}

　　这种方式可以有效阻止弹窗内内容的滚动，但需要注意的是，它也会阻止弹窗内所有元素的默认滚动行为。

场景二：弹窗内有滚动内容

　　当弹窗内有需要滚动的内容时，可以通过动态添加 CSS 样式来解决问题。具体做法是在弹窗显示时，给外层根元素添加一个 overflow: hidden 的样式，弹窗关闭时再移除这个样式。

.overflow-hidden {

overflow: hidden;

height: 100%;

}

　　这种方式的优点是简单易行，但缺点是当弹窗显示时，底层页面会回到顶部，可能会影响用户体验。

场景三：使用绝对定位包裹底层页面

　　为了避免底层页面回到顶部的问题，可以将整个底层页面使用一个 div 包裹起来，并设置其为绝对定位。当弹窗显示时，设置这个 div 的 overflow 为 hidden，弹窗关闭时再恢复。

.wrapper {

position: absolute;

width: 100%;

height: 100%;

overflow: auto;

-webkit-overflow-scrolling: touch;

}



.wrapper.overflow-hidden {

overflow: hidden;

}

　　这种方式虽然解决了底层页面回到顶部的问题，但引入了新的问题：无法触发页面的上拉触底和下拉刷新事件。如果不介意这一点，可以使用 -webkit-overflow-scrolling 的 touch 属性来解决。

function handleScroll() {

const wrapper = document.querySelector('.wrapper');

wrapper.style.overflow = 'hidden';

}



function restoreScroll() {

const wrapper = document.querySelector('.wrapper');

wrapper.style.overflow = 'auto';

}

　　通过这种方式，你可以在弹窗显示时控制页面的滚动行为，同时保持页面的其他功能不受影响。