禁止父元素滚动

最新推荐文章于 2024-06-24 14:03:22 发布
原创 最新推荐文章于 2024-06-24 14:03:22 发布 · 4.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#禁止父元素滚动

本文介绍了解决网页中弹窗与父元素同时滚动问题的两种有效方法：通过为body元素添加overflow:hidden样式来阻止页面滚动，或者在弹窗元素上应用overscroll-behavior:contain属性，以确保滚动行为仅限于弹窗内部而不影响其外部区域。
在做弹窗的时候经常会遇到滚动弹窗，父元素也滚动的问题，解决的方法有两个
  • 显示弹窗时候，body添加overflow：hidden样式
  • 弹窗添加overscroll-behavior: contain
解决iframe内使用scrollIntoView导致外部父元素也滚动的问题
qq_40567849的博客
04-06 2455
解决iframe内使用导致外部父元素也滚动的问题。
uniapp H5的弹窗滚动穿透解决
每天都要努力学习哦~~
04-22 2890
有一层遮罩蒙层覆盖在body上时，当我们滚动，它下面的内容也会跟着一起滚动，看起来好像是上面的滚动事件穿透到下面的DOM元素上一样，我们称之为滚动穿透。
在vue中实现禁止屏幕滚动,禁止屏幕滑动
10-15
主要介绍了在vue中实现禁止屏幕滚动,禁止屏幕滑动，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
一个VUE组件子元素scroll父元素容器不跟随滚动兼容PC移动端
08-09
一个 VUE 组件：子元素 scroll 父元素容器不跟随滚动（兼容PC、移动端）
纯原生JS移动端阻止页面元素滚动插件
08-10
纯原生JS，移动端阻止页面元素滚动插件
Javascript禁止父元素滚动条滚动， pc、移动端均有效
weixin_30872789的博客
02-26 484
在网页中经常会遇到这样的场景， 网页比较长有滚动条， 然后网页内的某个内容块里面的内容也比较长， 也具有滚动条。当鼠标移到内容块中使用滚动条来滚动查看内容到达底部或头部的时候，父元素的滚动条也就开始滚动了， 非常影响体验， 特别是选择东西的时候。我们需要在滚动的时候不允许父元素也跟着滚动。有一种非常简单， 但是适应能力不强的方法就是， 给鼠标一上去的时候， 给BODY加一个css 属性overfl...
ios H5 弹出后 禁止父元素滚动条 js代码
LingMax的博客
10-26 660
第一步在要禁用的元素里增加一个占满页面的div或者直接修改这个元素的类名为end_overflow 例如 <div class="end_overflow" style=" position: absolute; width: calc(100vw); top:0; left: 0; height: calc(100vh + 1px); z-index: -1;"> 内容呢热闹禸 </div> 第二步执行JS即可 ...
html，父元素和子元素都允许滚动，子元素滚动时 禁止父元素滚动
05-10
具体思路是：监听子元素的滚动事件，当子元素滚动时，通过设置父元素的`overflow`属性为`hidden`来禁止父元素滚动；当子元素滚动结束时，再将父元素的`overflow`属性设置为`auto`。 以下是一个实现示例： HTML代码...
html子元素滚动时 禁止父元素滚动
05-10
可以使用CSS的`overflow`属性来实现。将父元素的`overflow`属性设置为`hidden`，并将子元素的`overflow`属性设置为`auto`或`scroll`，这样当子元素滚动时...将上述CSS代码添加到样式表中即可实现禁止父元素滚动的效果。
关于IOS中，子元素滚动，阻止父元素滚动
8月13日
03-15 1871
关于IOS中，子元素滚动，阻止父元素滚动 目前我使用的方式就是 对于父元素进行fixed定位 设置width: 100%; height: 100%; position: fixed;top:0;left:0;
JQ扩展禁止外层滚动
weixin_34198583的博客
08-27 351
$.fn.scrollUnique = function() { return $(this).each(function() { var eventType = 'mousewheel'; $(this).on(eventType, function(event) { var scrollTop = this.scrollTop, ...
页面弹框，禁止背景元素滚动（只禁止了mousewheel事件，鼠标还是可以拖动的）
zhanxinCBB的博客
10-31 1374
$(document).get(0).addEventListener('mousewheel', removeWheelEvent, false); $('.middle').get(0).addEventListener('mousewheel', enAbleScroll, false); function enAbleScroll(e) { e.stopPr
html禁止元素滚动,如何禁用浏览器或元素滚动条，但仍允许使用滚轮或箭头键滚动？...
weixin_26965807的博客
06-10 1134
纯CSS解决方案怎么样？我已经测试了这个，它运行正常。但是，我会推荐解决方案3，因为它不是hacky，所有浏览器都支持JS，它非常简单。解决方案1(跨浏览器但更hacky)#div{position:fixed;right:-20px;left:20px;background-color:black;color:white;height:5em;overflow-y:scroll;...
CSS 相对父级固定，且不随滚动条滚动
最新发布
qq_41838435的博客
06-24 1148
【代码】CSS 相对父级固定，且不随滚动条滚动。
CSS overscroll-behavior让滚动嵌套时父滚动不触发
我的技术博客
08-29 639
一个滚动的body中有个容器,而且这个容器也是可以滚动的,当容器滚动到开始位置或者结束位置时,继续滑动鼠标会影响到body的滚动,其实一个css属性即可解决,详情请见张大神博客。
Jquery 操作子页面滚动禁止父页面跟着滚动
12-17 2697
一、实现方式：jQuery 事件 - preventDefault() 方法； 二、使用实例： $("a").click(function(event){ event.preventDefault(); }); 三、参照实例网址：https://www.zhangxinxu.com/study/201512/inner-scroll-prevent-parent-scroll.html...
如何禁止页面滚动事件
susanzxl的专栏
05-11 2571
document.documentElement.style.overflow='hidden';//即：设置html元素的overflow属性hidden   document.body.style.overflow='hidden'//移动端的可以这样设置  这样设置之后，页面上的滚动条就消失了，页面就无法滚动了！
html禁止pc,Javascript禁止父元素滚动条滚动， pc、移动端均有效
weixin_39738755的博客
06-15 543
在网页中经常会遇到这样的场景， 网页比较长有滚动条， 然后网页内的某个内容块里面的内容也比较长， 也具有滚动条。当鼠标移到内容块中使用滚动条来滚动查看内容到达底部或头部的时候，父元素的滚动条也就开始滚动了， 非常影响体验， 特别是选择东西的时候。我们需要在滚动的时候不允许父元素也跟着滚动。有一种非常简单， 但是适应能力不强的方法就是， 给鼠标一上去的时候， 给BODY加一个css 属性overfl...
css设置子元素相对于父元素保持位置不变（含有滚动条的父元素）
热门推荐
yzy85的专栏
04-19 1万+
方法一：利用子元素设置position:fixed后由于transform导致的相对视口定位失效bug引起的fixed相对于父级定位； 方法二：利用子元素设置position:absolute后会相对于第一个设置了relative的元素定位来保持位置；
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一颗小行星!

恰饭ing

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值