局部容器滚动时父容器不触发滚动

在网页开发中,嵌套滚动还是很常见的,见下面示例。

子容器滚动到底部后继续滑动鼠标滚轮,这时候会触发父级容器的滚动。如何取消这个feature呢?overscroll-behavior闪亮登场。

1
2
overscroll-behavior: auto;     /* 默认的滚动行为 */
overscroll-behavior: contain; /* 滚动只会发生在当前容器 */

参考资料:
CSS overscroll-behavior让滚动嵌套时父滚动不触发


局部容器滚动时父容器不触发滚动
https://xypecho.github.io/2023/01/31/局部容器滚动时父容器不触发滚动/
作者
很青的青蛙
发布于
2023年1月31日
许可协议