CSS overscroll-behavior让滚动嵌套时父滚动不触发

最新推荐文章于 2023-04-06 18:00:00 发布
原创 最新推荐文章于 2023-04-06 18:00:00 发布 · 635 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #javascript

本文介绍如何使用CSS属性解决嵌套滚动容器的问题，当内部容器滚动到边界时，避免影响外部body的滚动。

一个滚动的body中有个容器,而且这个容器也是可以滚动的,当容器滚动到开始位置或者结束位置时,继续滑动鼠标会影响到body的滚动,其实一个css属性即可解决,详情请见张大神博客
具体参考:
https://www.zhangxinxu.com/wordpress/2020/01/css-overscroll-behavior/
在这里插入图片描述

深入解析 CSS `overscroll-behavior-x` 属性
2501_93104808的博客
10-03 368
overscroll-behavior-x是CSS属性，用于控制水平滚动容器的边界行为。它能阻止水平滚动链（防止父级元素滚动）、管理原生过滚动效果（如弹跳/发光），提升用户体验。主要取值：auto（默认）、contain（阻止滚动链但保留效果）、none（阻止滚动链和效果）。该属性适用于有水平溢出内容的元素，不可继承，现代浏览器广泛支持。常与overscroll-behavior-y配合使用，或通过简写属性overscroll-behavior同时控制水平和垂直方向。在移动端可防止操作内部组件时意外触发页面
深入解析 CSS `overscroll-behavior-y` 属性
最新发布
2501_93104808的博客
10-03 319
overscroll-behavior-y是CSS属性，用于控制垂直滚动容器的边界行为。它有三个主要值：auto（默认，允许滚动链和原生效果）、contain（阻止滚动链但保留效果）和none（阻止滚动链和效果）。该属性不可继承，适用于有垂直溢出的元素，常用于改善模态框等组件的用户体验。使用时通常与overscroll-behavior-x配合，或直接使用简写属性overscroll-behavior。现代浏览器普遍支持该属性。
JavaScript+CSS双层嵌套滑动门
08-28
JavaScript+CSS联合完成一个特别的滑动门功能，让两个滑动块分里面两层嵌套在一起，其实这种使用价值不太大，只不过这里可以当作一个技术问题来共同探讨，要注意一下CSS中的margin那里调节各个li之间的距离,position是保证下边框的出现，其它的请看代码里的注释吧。
禁止父元素滚动
小朱的专栏
12-17 4154
在做弹窗的时候经常会遇到滚动弹窗，父元素也滚动的问题，解决的方法有两个 显示弹窗时候，body添加overflow：hidden样式 弹窗添加overscroll-behavior: contain ...
Javascript禁止父元素滚动条滚动， pc、移动端均有效
weixin_30872789的博客
02-26 481
在网页中经常会遇到这样的场景， 网页比较长有滚动条， 然后网页内的某个内容块里面的内容也比较长， 也具有滚动条。当鼠标移到内容块中使用滚动条来滚动查看内容到达底部或头部的时候，父元素的滚动条也就开始滚动了， 非常影响体验， 特别是选择东西的时候。我们需要在滚动的时候不允许父元素也跟着滚动。有一种非常简单， 但是适应能力不强的方法就是， 给鼠标一上去的时候， 给BODY加一个css 属性overfl...
CSS属性overscroll-behavior控制容器滚动行为
justforuse的博客
12-28 4815
Chrome63版本新特性中包含支持overscroll-behavior属性，此属性的功能是什么呢？我们会发现当子元素滚动到顶部或底部继续滚动滚轮时，会导致父元素的滚动，但这种行为有时会影响页面体验。使用该属性可以禁掉此行为。在子元素上应用overscroll-behavior: contain即可。其他属性值还有none, 该功能除了contain的功能外还会阻止节点的默认滚动行为，主要是移动端
嵌套滚动条
sinat_34748348的博客
08-23 1081
table高度 html> head> meta charset="UTF-8"> title>overflowtitle> script src="jquery-3.2.1.min.js">script> style> table { display: block; width: 600px;
css div加滚动条
07-16
如果存在嵌套滚动区域，并希望阻止滚动事件冒泡到外层容器，可以使用 `overscroll-behavior` 属性： ```css .scrollable-div { overscroll-behavior: contain; /* 阻止滚动冒泡 */ } ``` 此设置可防止滚动到底部...
有滚动条的父元素包裹一个有滚动条的和无滚动条的，无法滚动到最底部
05-09
当父元素和子元素都有滚动条时，用户可能发现滚动父元素时无法到达最底部。这可能是因为子元素的滚动条占用了空间，导致父元素的可滚动区域计算不准确，或者事件冒泡阻止了父元素的滚动。 接下来，我需要考虑可能的...
element-plus Infinite Scroll 无限滚动手机浏览器触底不刷新
08-06
我们正在解决在手机浏览器中使用element-plus的Infinite Scroll（无限滚动）时触底不刷新的问题。根据提供的引用和常见问题，我们可以从以下几个方面进行排查和解决： 1. **检查滚动容器设置**：Infinite Scroll...
滚动视图嵌套列表视图效果
04-03
这个案例是滚动视图嵌套列表视图效果，该效果可以支持滚动视图ScrollView里面嵌套一个列表视图listview ，同时还可以支持列表视图listview里面再嵌套一个列表视图listview的效果等。
uniapp滚动overflow-y: scroll失效问题
m0_62152730的博客
04-13 5751
在uni-popup使用overflow：scroll失效问题。 原因：uni-popup最外层设置了@touchmove.stop.prevent="clear"，禁止内部滑动，导致滑动没有效果。 结果：去掉@touchmove.stop.prevent 即可。
子元素DIV不随父DIV的滚动条移动
学习园地
05-02 5413
子元素过高导致父元素出现滚动条时，它并不会像预期的那样呆在父元素里，而是浮在父元素之上，并且位置不随滚动条的移动而改变。根源就是子元素的"position:relative" 解决方法：为父元素也添加"position:relative"设置
【CSS技巧系列】解决子容器滚动引发父容器滚动问题
程麒阁的博客
08-31 2867
有些时候子容器和父容器都有滚动，子容器滚动到尽头的时候父容器会触发滚动，更有甚者有可能会触发谷歌浏览器的双指回退，那么你知道该怎么解决嘛？
scroll-behavior: smooth； 在Chrome中无法正常工作
weixin_44217613的博客
04-06 836
【代码】scroll-behavior: smooth；在Chrome中无法正常工作。
window.scroll({ behavior: 'smooth' }) 在移动端不生效的问题解决
一个在全能之路上越走越远的男人。
04-10 3997
首先，遇到问题，一般百度解决不了。如果你是百度搜到我的那你真是幸运，反正我百度没搜到解决方法，最后还得靠goole。 先直接上解决方案： // 安装这个插件 yarn add smoothscroll-polyfill 或者 npm i smoothscroll-polyfill 在你需要解决问题的页面引入： import smoothscroll from 'smoothscroll-p...
解决双滚动条聚焦问题
weixin_43575775的博客
02-16 3768
解决双滚动条聚焦问题 两个滚动条导致的页面卡顿问题
CSS overscroll-behavior：
YDOOK
08-13 518
overscroll-behavior ：auto 默认，继承父类滚动样式 overscroll-behavior ：contain 阻止滚动链接，不继承父类滚动样式，使用Android 炫光或 iOS 回弹效果。 overscroll-behavior ：none 阻止滚动链接，不继承父类滚动样式，不使用Android 炫光或 iOS 回弹效果。 ...
overscroll-behavior的使用及局限性
cry
07-15 2507
背景：滚动购物车悬浮框时，底层的页面也会跟着滚动，非常影响用户体验 此时需要在设置了overflow的元素上使用overscroll-behavior overscroll-behavior: contain; 使用后效果： 但overscroll-behavior也存在局限，只能在悬浮框存在滚动条时阻止底层页面滚动，当悬浮框内容较少，不出现滚动条，这时就无法阻止滚动了，如下图 ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值