前端实战：滚动监听实现顶部 logo 平滑显隐效果-云帆数科

开发弹窗、侧边抽屉、全屏遮罩这类组件时经常会遇到一个问题弹窗弹出后底层页面依然可以滚动体验很差。常见方案就是控制body的滚动本文使用 jQuery 实现禁止页面滑动和恢复页面滑动同时说明坑点。核心原理修改body的overflow属性禁止滚动条阻止页面滚动。代码示例1. 禁止页面滚动// 禁止滚动 $(body).css(overflow, hidden);2. 恢复页面滚动// 恢复滚动就是你写的这句 $(body).css(overflow, auto);完整演示弹窗场景!DOCTYPE html html langzh-CN head meta charsetUTF-8 title禁止页面滚动演示/title script srchttps://cdn.jsdelivr.net/npm/jquery3.7.1/dist/jquery.min.js/script style .mask{ display: none; position: fixed; top:0;left:0; width:100%;height:100%; background: rgba(0,0,0,0.5); } /style /head body styleheight:2000px; button classopen打开弹窗禁止滚动/button div classmask button classclose关闭弹窗恢复滚动/button /div script // 打开弹窗禁止body滚动 $(.open).on(click, function(){ $(.mask).show(); $(body).css(overflow, hidden); }) // 关闭弹窗恢复body滚动 $(.close).on(click, function(){ $(.mask).hide(); $(body).css(overflow, auto); }) /script /body /html存在的问题重点滚动条消失页面会发生横向抖动overflow:hidden会直接隐藏滚动条页面宽度瞬间变大出现页面往右 “弹一下” 的抖动。解决思路禁止滚动时给 body 增加padding-right值等于滚动条宽度。// 获取滚动条宽度 function getScrollWidth(){ const div document.createElement(div); div.style.width 100px; div.style.height 100px; div.style.overflow scroll; div.style.position absolute; div.style.left -9999px; document.body.appendChild(div); const width div.offsetWidth - div.clientWidth; document.body.removeChild(div); return width; } // 禁止滚动 $(body).css({ overflow: hidden, paddingRight: getScrollWidth() px }); // 恢复滚动 $(body).css({ overflow: auto, paddingRight: 0px });移动端兼容性差在手机浏览器单纯设置body {overflow:hidden}经常失效手指依然可以上下拖动页面。移动端推荐搭配touchmove事件阻止。// 禁止移动端touch滚动 function preventTouch(e){ e.preventDefault(); } // 禁止滚动时绑定 document.addEventListener(touchmove, preventTouch, {passive:false}); // 恢复滚动时解绑 document.removeEventListener(touchmove, preventTouch);注意passive:false是新版浏览器要求否则无法执行e.preventDefault()页面滚动位置丢失设置overflow:hidden后部分浏览器会重置滚动位置。如果需要保留滚动位置需要额外记录scrollTop。其他方案对比表格方案优点缺点body overflow:hidden简单一行 jQuery 代码移动端失效、滚动条抖动固定定位 fixed 锁页面兼容性好需要记录保存 scrollTop阻止 touchmove 事件移动端效果好会禁止弹窗内部滚动总结PC 端简单场景直接使用//禁止 $(body).css(overflow,hidden) //恢复 $(body).css(overflow,auto)生产环境需要处理滚动条抖动移动端场景不能只靠 overflow必须配合 touchmove 事件。注意如果弹窗内部有滚动区域不能全局阻止 touchmove否则弹窗内部也无法滚动需要做事件判断

企业数字化 ERP 产品动态

相关推荐

Visdom 窗口系统完全指南：Window ID、拖拽布局、程序化操作与实时参数编辑

Visdom 窗口系统完全指南：Window ID、拖拽布局、程序化操作与实时参数编辑【免费下载链接】visdom Tool for real-time visualization, monitoring and collaborative analysis of AI/ML experiments and live data. Supports Python, PyTorch/Torch, NumPy, Tenso… · 2026/9/24 17:02:56

云手机哪个好用？系统兼容性、保活、网络维度分析，怎么选

云手机本质是部署在云端服务器上的 Android 虚拟设备，可实现本地设备关机后云端应用持续运行。本文从技术指标出发，整理了云手机的核心评估维度，对比市面主流几款产品的特性、优缺点，面向个人开发者、测试人员、应用托管用户提供选… · 2026/9/24 17:02:50

如何 5 步让虚拟角色开口说话：ComfyUI-WanVideoWrapper 语音驱动完整新手指南

如何 5 步让虚拟角色开口说话：ComfyUI-WanVideoWrapper 语音驱动完整新手指南【免费下载链接】ComfyUI-WanVideoWrapper 项目地址: https://gitcode.com/GitHub_Trending/co/ComfyUI-WanVideoWrapper 你是否也遇到过这样的场景：配音挑得再好&am… · 2026/9/24 17:02:50

苹果远程控制软件哪个好用苹果远程控制软件推荐

苹果远程控制软件大多适配性差、体验参差不齐，很多果粉尝试过多款工具，都难以实现流畅稳定的跨设备远控。苹果远程控制软件想要适配iPhone、iPad、Mac全系列设备，不妨试试无界趣连2.0，它兼顾实用性与稳定性，完美解决苹… · 2026/9/24 17:36:02

09-基于STM32的独居老人智能监护系统设计

单片机型号（STM32）目录一、摘要二、设计要求三、原理图四、说明书预览五、QA作者简介:电类领域优质创作者、多年架构师设计经验、多年校企合作经验，被多个学校常年聘为校外企业导师，指导学生毕业设计并参与学生毕业答辩指导&#… · 2026/9/24 17:36:02

cat ,more,less,head,tail文件查看类命令

cat：查看文件内容在1.txt里面写一些东西cat -n 1.txt ：内容前面带上行号more ：文件内容太多时用这个命令，如果显示不全可以按空格来查看看完就自动退出less:于more一致查看完按Q退出head；查看文件前十行tail&#xff… · 2026/9/24 17:36:02

MongoDB mongodump mongorestore备份恢复实操记录

部署主机：10.10.10.128操作系统：CentOS Linux7.9.2009MongoDB版本：4.2.25部署日期：2026‑09‑20一、概述mongodump/mongorestore是MongoDB逻辑备份工具；导出BSON二进制文件，支持全实例、单库、单集合备份&a… · 2026/9/24 17:36:02

手机连接电脑软件有哪些手机连接电脑软件哪个好

手机连接电脑软件五花八门，不少工具看似功能齐全，实则暗藏各种收费限制和使用短板，日常远程办公、娱乐使用体验很差。手机连接电脑软件想要兼顾实用性、性价比与安全性，建议试试无界趣连2.0，不用折腾复杂设置&#xff… · 2026/9/24 17:35:56

基于STM32的路灯智能控制系统设计（光控+人体感应+太阳能追光+火灾报警）

基于STM32的路灯智能控制系统设计（光控人体感应太阳能追光火灾报警） 一、系统功能总览二、核心模块选型对比 2.1 主控模块：STM32F103C8T6 vs NXP LPC55S692.2 光敏检测模块：GL5528 vs BH17502.3 红外检测模块：红外对管… · 2026/9/24 17:35:56

基于YOLOv8的渔船作业监控系统：从环境搭建到边缘部署全流程

简介：这是一套面向计算机、人工智能、自动化等专业学生与教师的毕业设计级项目资源，围绕YOLOv8实现渔船作业监控系统，可用于毕设、课程设计、大作业或项目立项演示。压缩包共97个文件，约24.21MB，以70个Python源码文件为… · 2026/9/24 0:00:13

1D-CNN时间序列建模实战：从Conv1d原理到工业落地

简介：面向时间序列数据建模的一维卷积神经网络完整实现，适合深度学习入门者及需要快速验证时序模型的研究者，能够从音频、文本、传感器或股价等序列中挖掘局部特征与时间依赖。压缩包体积很小，只有3KB，内含3个Python脚… · 2026/9/24 0:00:26

柔软的L：汉语语流中被忽视的舌肌张力控制

1. 这个“L”不是字母表里的L，而是舌尖上的L最近在几个方言群和语音教学社群里，反复看到有人发一句：“也说字母L：柔软的长舌”。初看以为是英语发音课笔记，点开才发现全是方言爱好者、播音系学生、语言康复师甚至戏曲演… · 2026/9/24 0:00:44

前端实战：滚动监听实现顶部 logo 平滑显隐效果

相关推荐

了解更多？预约专属演示