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

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

#css #前端 #javascript

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

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

使用overscroll-behavior控制滚动边界行为
weixin_41455464的博客
06-27 65
你有没有遇到过这样的情况：在一个页面里，有一个小的滚动区域（比如一个弹窗、一个侧边栏），当你滚动到这个小区域的顶部或底部时，整个页面的滚动条竟然也跟着动了起来？这样，当你在侧边栏滚动到顶部或底部时，只有侧边栏会滚动，页面主体内容不会受到影响。它就像一位经验丰富的“交通警察”，能精准地控制滚动行为，让你的页面滚动起来丝滑又听话，告别“一动全身”的尴尬。当你滚动到弹窗的底部时，整个页面的滚动条也跟着动了起来，这显然不是我们想要的。当滚动到达边界时，它会“传染”给父元素，导致不必要的滚动，影响用户体验。
CSS系列007-浏览器滚动溢出问题
hanbing1307的博客
03-19 359
contain:默认的滚动溢出行为将被内部的元素观察到，但相邻的区域不会产生连续滚动效果。overscroll-behavior-x:这个css属性用来控制当滚动到区域的水平边界时的浏览器行为。- none:相邻的滚动区域不会有连续滚动效果，且默认的滚动溢出行为会被阻止。- auto:默认的滚动溢出行为表现的和正常一样。
JavaScript+CSS双层嵌套滑动门
08-28
JavaScript+CSS联合完成一个特别的滑动门功能，让两个滑动块分里面两层嵌套在一起，其实这种使用价值不太大，只不过这里可以当作一个技术问题来共同探讨，要注意一下CSS中的margin那里调节各个li之间的距离,position是保证下边框的出现，其它的请看代码里的注释吧。
禁止父元素滚动
小朱的专栏
12-17 4105
在做弹窗的时候经常会遇到滚动弹窗，父元素也滚动的问题，解决的方法有两个 显示弹窗时候，body添加overflow：hidden样式 弹窗添加overscroll-behavior: contain ...
解释 CSS 中overscroll-behavior属性的作用，它在处理滚动溢出时有什么帮助
最新发布
前端大白话
04-30 1078
CSS中的属性看似简单，却在处理滚动溢出问题、提升用户体验方面发挥着重要作用。通过本文对痛点场景、技术原理、代码示例、对比效果以及扩展思考的详细介绍，相信大家已经对该属性有了全面深入的理解。在实际的前端开发中，合理运用属性，能够有效解决滚动交互中存在的各种问题，为用户带来更加流畅、舒适的使用体验。希望大家在今后的项目中，不要忽视这个“宝藏”属性，充分发挥它的价值，打造出更优质的前端应用！如果你在使用过程中有任何经验或问题，欢迎在评论区留言交流，让我们一起在前端技术的道路上不断进步！
Javascript禁止父元素滚动条滚动， pc、移动端均有效
weixin_30872789的博客
02-26 462
在网页中经常会遇到这样的场景， 网页比较长有滚动条， 然后网页内的某个内容块里面的内容也比较长， 也具有滚动条。当鼠标移到内容块中使用滚动条来滚动查看内容到达底部或头部的时候，父元素的滚动条也就开始滚动了， 非常影响体验， 特别是选择东西的时候。我们需要在滚动的时候不允许父元素也跟着滚动。有一种非常简单， 但是适应能力不强的方法就是， 给鼠标一上去的时候， 给BODY加一个css 属性overfl...
CSS属性overscroll-behavior控制容器滚动行为
justforuse的博客
12-28 4766
Chrome63版本新特性中包含支持overscroll-behavior属性，此属性的功能是什么呢？我们会发现当子元素滚动到顶部或底部继续滚动滚轮时，会导致父元素的滚动，但这种行为有时会影响页面体验。使用该属性可以禁掉此行为。在子元素上应用overscroll-behavior: contain即可。其他属性值还有none, 该功能除了contain的功能外还会阻止节点的默认滚动行为，主要是移动端
嵌套滚动条
sinat_34748348的博客
08-23 1050
table高度 html> head> meta charset="UTF-8"> title>overflowtitle> script src="jquery-3.2.1.min.js">script> style> table { display: block; width: 600px;
04 【布局之Overscroll Behavior 定位偏移量】
DSelegent的博客
08-30 468
04 【布局之Overscroll Behavior 定位偏移量】
overscroll-behavior 怎么用 示范代码
10-16
`overscroll-behavior` 是CSS的一个新特性，它允许开发者自定义元素在滚动过程中的过度滚动效果。这个属性主要用于控制元素滚动到边缘之外时的行为，比如创建平滑的滚屏效果、淡入淡出动画等。 使用示例代码： ```...
OpenHarmony开发知识指南：UI滚动组件overscroll-decor
v_maniu110的博客
07-16 325
类似iOS风格的边缘滚动效果视图。 支持下列视图：RecyclerView, ListView, GridView, ViewPager, ScrollView, HorizontalScrollView, Any View - Text, Image...
滚动视图嵌套列表视图效果
04-03
这个案例是滚动视图嵌套列表视图效果，该效果可以支持滚动视图ScrollView里面嵌套一个列表视图listview ，同时还可以支持列表视图listview里面再嵌套一个列表视图listview的效果等。
子元素DIV不随父DIV的滚动条移动
学习园地
05-02 5362
子元素过高导致父元素出现滚动条时，它并不会像预期的那样呆在父元素里，而是浮在父元素之上，并且位置不随滚动条的移动而改变。根源就是子元素的"position:relative" 解决方法：为父元素也添加"position:relative"设置
移动端滚动穿透与滚动溢出解决方案
zz_jesse的博客
03-03 1360
滚动穿透滚动穿透.gif问题描述在移动端 WEB 开发的时候（小程序也雷同），如上录屏所示，如果页面超过一屏高度出现滚动条时，在 fixed 定位的弹窗遮罩层上进行滑动，它下面的内容也会跟...
浏览器兼容性问题解决方案 · 总结
熊宗的博客
11-10 891
普及：浏览器的兼容性问题，往往是个别浏览器（没错，就是那个与众不同的浏览器）对于一些标准的定义不一致导致的。俗话说：没有IE就没有伤害。 贴士：内容都是自己总结的，不免会出现错误或者bug，欢迎更正和补充，本帖也会不断更新。 Normalize.css 不同浏览器的默认样式存在差异，可以使用 Normalize.css 抹平这些差异。当然，你也可以定制属于自己业务的 reset.
window.scroll({ behavior: 'smooth' }) 在移动端不生效的问题解决
一个在全能之路上越走越远的男人。
04-10 3957
首先，遇到问题，一般百度解决不了。如果你是百度搜到我的那你真是幸运，反正我百度没搜到解决方法，最后还得靠goole。 先直接上解决方案： // 安装这个插件 yarn add smoothscroll-polyfill 或者 npm i smoothscroll-polyfill 在你需要解决问题的页面引入： import smoothscroll from 'smoothscroll-p...
uniapp滚动overflow-y: scroll失效问题
m0_62152730的博客
04-13 5640
在uni-popup使用overflow：scroll失效问题。 原因：uni-popup最外层设置了@touchmove.stop.prevent="clear"，禁止内部滑动，导致滑动没有效果。 结果：去掉@touchmove.stop.prevent 即可。
解决移动端scrollTo({behavior: “smooth“})滑动效果失效的问题
liucai1018的博客
05-14 8153
js自带的scrollTo方法可以设置动画，滚动的效果，代码在电脑上正常，但是在手机上的时候就没有smooth的滑动效果了，只能僵硬的跳到某个位置，类似scrollTop赋值的效果，这里从一个博客看到的一个解决办法，试了下确实可以，所以记录一下： 首先安装这个插件：smoothscroll-polyfill npm install smoothscroll-polyfill --save 然后引入并在组件创建的时候调用下这个方法：比如mounted中 import smoothscroll fr
javascript:window.scroll()函数behavior属性smooth属性值在iphone浏览器上不兼容
weixin_46639278的博客
12-28 2578
javascript:window.scroll()函数behavior属性smooth属性值在iphone浏览器上不兼容 在制作静态页面的时候，使用window.scroll()来实现点击爬楼的事件，一开始是这样写的 let height = 500 //需要跳转到的高度 this.window.scroll({ “top”:height, “behavior”:“smooth” }） 在安卓手机的浏览器上是可以实现的，但是一用苹果浏览器打开，当我点击触发事件时， “behavior”:"smooth"
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值