在移动端,当有浮层出现时,我们通常会希望阻止底层的窗体(或页面)滚动。这可以通过使用JavaScript和CSS来实现。 HTML 结构:
html
<div class="container">
<button class="open-button">打开浮层</button>
<div class="overlay">
<div class="content">
<!-- 浮层内容 -->
</div>
</div>
</div>
CSS 样式:
css
.container {
position: relative;
height: 100vh; /* 设置容器高度为视口高度 */
overflow: hidden; /* 防止底层内容溢出可视区域 */
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
z-index: 9999; /* 确保浮层位于最顶层 */
overflow-y: auto; /* 允许浮层内部内容滚动 */
}
.content {
/* 浮层内容样式 */
}
JavaScript 代码:
javascript
const openButton = document.querySelector('.open-button');
const overlay = document.querySelector('.overlay');
openButton.addEventListener('click', function() {
overlay.classList.add('show'); // 显示浮层
disableBodyScroll(); // 禁用窗体滚动
});
function disableBodyScroll() {
document.body.style.overflow = 'hidden';
document.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableBodyScroll() {
document.body.style.overflow = '';
document.removeEventListener('touchmove', preventDefault);
}
function preventDefault(event) {
event.preventDefault();
}
在上述示例中,我们首先使用CSS样式设置了容器的高度为视口高度,并给浮层添加了position: fixed;
来固定它在页面上。同时,我们使用半透明黑色背景以及适当的z-index值来确保浮层在最顶层。
在JavaScript代码中,我们通过监听打开按钮的点击事件来显示浮层,并调用disableBodyScroll()
函数来禁用窗体滚动。该函数通过将overflow
属性设置为hidden
来隐藏整个窗体的滚动条。然后,我们使用addEventListener
来监听touchmove
事件,并通过调用preventDefault()
函数来阻止默认的滚动行为。
当需要关闭浮层时,你可以添加相应的关闭按钮,并在点击事件中调用enableBodyScroll()
函数来恢复窗体的滚动。
重新写一个
HTML 结构:
html
<div class="container">
<button class="open-button">打开浮层</button>
<div class="overlay">
<div class="content">
<!-- 浮层内容 -->
</div>
</div>
</div>
CSS 样式:
css
.container {
position: relative;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
overflow-y: auto;
}
.content {
/* 浮层内容样式 */
}
JavaScript 代码:
javascript
const openButton = document.querySelector('.open-button');
const overlay = document.querySelector('.overlay');
openButton.addEventListener('click', function() {
overlay.classList.add('show');
disableBodyScroll();
});
function disableBodyScroll() {
const scrollY = window.scrollY;
document.body.style.position = 'fixed';
document.body.style.top = `-${scrollY}px`;
document.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableBodyScroll() {
const scrollY = parseFloat(document.body.style.top);
document.body.style.position = '';
document.body.style.top = '';
window.scrollTo(0, Math.abs(scrollY));
document.removeEventListener('touchmove', preventDefault);
}
function preventDefault(event) {
event.preventDefault();
}
在这个续篇示例中,我们与之前的示例相比,对JavaScript代码进行了一些修改。具体来说:
- 在
disableBodyScroll
函数中,我们保存了窗体当前的滚动位置scrollY
,然后将position
属性设置为fixed
并使用负值将top
属性设为-${scrollY}px
,从而固定整个窗体,并保持滚动位置不变。 - 在
enableBodyScroll
函数中,我们恢复了窗体的滚动。我们先通过parseFloat
解析之前保存的滚动位置scrollY
,然后将position
属性和top
属性重置为空字符串,并使用window.scrollTo()
方法将窗体滚动到之前保存的位置。
通过这种方式,在浮层出现时,可以阻止底层窗体的滚动,同时保持滚动位置不变。当关闭浮层时,窗体的滚动行为将恢复原状。