0
点赞
收藏
分享

微信扫一扫

使用 overscroll-behavior 禁止滚动嵌套中的父滚动

沪钢木子 2021-09-24 阅读 42
基础前端

我在项目中做了个类似蓝湖消息系统的东西,要求是消息面板滑动到底部的时候,背景那个最大的大盒子不能滚动。这时候就可以使用 overscroll-behavior: contain; 来达到目的。

参见:

  1. CSS overscroll-behavior 让滚动嵌套时父滚动不触发
  2. 忍法,scroll 翻滚之术!

没搞懂,overscroll-behavior 值为 contain 和 none 的区别, PC 端表现的一毛一样。考虑到 overscroll-behavior 兼容性很好,但是保不齐要兼容 IE,可考虑原声 JS 实现禁止滚动嵌套中的父滚动。

  1. 直接给 <html> 标签设置一个 overflow:hidden 声明就可以干掉滚动条。
  2. 当移动端 overflow:hidden 失效情况下,参考 web移动端浮层滚动阻止window窗体滚动JS/CSS处理

CSS Scroll Snap 可以实现滚动吸附,移动端开发可以了解下:

大侠,请留步,要不过来了解下CSS Scroll Snap?
CSS scroll-snap滚动事件停止及元素位置检测

举报

相关推荐

0 条评论