web移动端浮层滚动阻止window窗体滚动JS/CSS处理

在移动端,当有浮层出现时,我们通常会希望阻止底层的窗体(或页面)滚动。这可以通过使用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代码进行了一些修改。具体来说:

  1. disableBodyScroll函数中,我们保存了窗体当前的滚动位置scrollY,然后将position属性设置为fixed并使用负值将top属性设为-${scrollY}px,从而固定整个窗体,并保持滚动位置不变。
  2. enableBodyScroll函数中,我们恢复了窗体的滚动。我们先通过parseFloat解析之前保存的滚动位置scrollY,然后将position属性和top属性重置为空字符串,并使用window.scrollTo()方法将窗体滚动到之前保存的位置。

通过这种方式,在浮层出现时,可以阻止底层窗体的滚动,同时保持滚动位置不变。当关闭浮层时,窗体的滚动行为将恢复原状。

相关推荐
slim~3 分钟前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
一支鱼8 分钟前
leetcode常用解题方案总结
前端·算法·leetcode
惜.己20 分钟前
针对nvm不能导致npm和node生效的解决办法
前端·npm·node.js
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
用户21411832636021 小时前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端
Zacks_xdc2 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
给月亮点灯|2 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
张迅之2 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
蔗理苦3 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro4 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs