当前位置： 首页 > article >正文

html - - - - - modal弹窗出现时，页面怎么能限制滚动

article 2025/2/22 14:37:10

html - - - - - 弹出出现时，页面怎么能限制滚动

  • 1. 全局添加css样式
  • 2. 更改弹窗状态时的操作

1. 全局添加css样式

.no-scroll {
  overflow: hidden;
  height: 100vh; /* 防止移动端地址栏隐藏导致的页面跳动 */
}

2. 更改弹窗状态时的操作

if(show){
  //  打开弹窗，添加class
  document.body.classList.add('no-scroll');
}else{
  //  关闭弹窗，移除class
  document.body.classList.remove('no-scroll');
}

http://www.kler.cn/a/556203.html

相关文章：

  • 处理器架构、单片机、芯片、光刻机之间的关系
  • Flutter开发的应用页面非常多时如何高效管理路由
  • vue2和vue3的按需引入的详细对比通俗易懂
  • 《DeepSeek量化炒股入门到精通》
  • 51c自动驾驶~合集51
  • 如何在 SpringBoot 项目使用 Redis 的 Pipeline 功能
  • 删除hive用户后该用户创建的表权限问题及修复
  • 策略模式Spring框架下开发实例
  • 基于Java实现宠物领养救助交流平台设计和实现
  • Ubuntu编译jetlinks-ui-vue
  • S7-1200的三种启动模式
  • 覆盖从供应、生产、销售到运营的全过程，引领行业数智化转型新方向的智慧快消开源了
  • 通俗易懂的DOM事件模型指南
  • 算法——Boyer-Moore算法
  • 什么容错性以及Spark Streaming如何保证容错性
  • JavaScript变量的作用域介绍
  • AI 在未来相机领域的应用前景如何？
  • OpenGL（2）基于Qt做OpenGL开发
  • 2024年数学SCI1区TOP：改进海洋捕食者算法MMPA用于UAV路径规划，深度解析+性能实测
  • Linux性能监控工具汇总