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

server/2025/2/22 1:20:13/

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

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

1. 全局添加css样式

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

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

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

http://www.ppmy.cn/server/169715.html

相关文章

midjourney 一 prompt 提示词

midjourney 不需要自然语言的描述,它只需要关键词即可。 一个完整的Midjourney prompt通常包括三个部分 图片提示(Image Prompts)、文本提示(Text Prompt)和参数(Parameters)。 1、图片提示(…

HTTP 协议(Ⅲ)

目录 一、HTTP 协议概念 二、无状态协议 三、HTTP1.0 & HTTP1.1 四、请求协议和响应协议 五、请求协议 1.浏览器监视请求和响应 2. HTTP请求 2.1 请求的结构 2.2 GET请求 2.3 POST请求 3. HTTP响应 3.1 响应的结构 3.2 常见响应头字段 3.3 常见状态码 4. 请求…

React进阶之前端业务Hooks库(一)

前端业务Hooks库 项目结构实现useToggleuseToggle/index.ts单测packages/hooks/src/\_test_/index.test.tspackages/hooks/src/useToggle/\_tests_/index.test.ts打包实现gulp打包gulpfiles.js根目录/gulpfile.jswebpack打包webpack.config.jspackages/hooks/package.json使用e…

tailwindcss 前端 css 框架 无需写css 快速构建页面

版本:VUE3 TS 框架 vite 文章中使用tailwindcss 版本: ^3.4.17 简介: Tailwind CSS 一个CSS 框架,提供组件化的样式,直接在HTML 中编写样式,无需额外自定义CSS ,快速! 简洁&#…

网络安全的坚固盾牌· FireEye

FireEye 网络安全的核心是多向量虚拟执行 (MVX) 和智能驱动分析 (IDA) 技术。MVX 是一种无特征码的动态分析引擎,可检查可疑的网络流量,以识别逃避传统基于签名和策略的防御的攻击。IDA 是上下文动态规则引…

【Python爬虫(13)】解锁动态网页爬取:从原理到实战

【Python爬虫】专栏简介:本专栏是 Python 爬虫领域的集大成之作,共 100 章节。从 Python 基础语法、爬虫入门知识讲起,深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑,覆盖网页、图片、音频等各类数据爬取&#xff…

python入门笔记5-集合与字典

元组 Python 的元组(tuple,简写为tup)与列表类似,不同之处在于元组的元素不能修改。 元组使用小括号​()​,列表使用方括号​[]​。 好处就是节省内存。 集合 集合是无序、不重复元素的容器。 用 {} 或 set() 创建…

ref() 和 reactive()响应性 浅解

文章目录 1. ref() 和 reactive() 的区别2. 解构 详解2.1. 什么是解构2.2. 解构避免丢失响应性的办法2.2.1. 解决方案:toRefs() 保持响应性2.2.2. 解决方案: toRef()保持响应性 3. 最佳实践 在 Vue 3 中,ref() 和 reactive() 都是用于响应式数…