body.notice-open { overflow: hidden; }
.notice-body { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
公告正文超过一屏后出现内外两条滚动条,滚到底部页面跟着滚,触控板上滚轮在公告里完全没反应,弹窗关掉后页面停在半中间。这类现象通常不是突然出现的,往前翻半天日志能看到苗头。
追下去是这么回事:外层弹窗设了 overflow: auto,内层内容又套了一个固定高度的滚动容器,滚轮事件被内层吃掉。遮罩没锁 body 滚动,滚到底就传给页面。
围绕「公告滚动嵌套」排查时,命令行跑一遍比在面板里点十次有用,面板会替你做掉不少隐式操作。同类问题如果隔一段时间又出现,多半是某个定时任务或重启流程把改动冲掉了。
把这次用到的命令存进笔记,比记住结论有用,换个环境还能照着走。
处理上按这个顺序:只保留内层一个滚动容器,外层改成 overflow: hidden;弹窗打开时给 body 加 overflow: hidden,关闭时还原;用滚轮在公告中部、底部各滚几圈,观察页面是否跟着动。
确认没问题再收工,公告内只有一条滚动条,滚到底页面不再跟着动。
