移动端设置overflow-x:hiden后scrollTop失效并一直为0

最新推荐文章于 2023-12-14 16:24:03 发布
最新推荐文章于 2023-12-14 16:24:03 发布
阅读量1.5k 收藏 2
点赞数 5
文章标签： scrollTop为0 overflow-x hiden 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_38735649/article/details/98731388
版权

在移动端h5页面开发时，我们可能需要监视scrollTop来控制一些顶部菜单样式变化。但是我们通常又会隐藏掉侧边栏，我们可以通过overflow-x:hiden来隐藏掉侧边滚轮。但是此时问题出现了，scollTop一直为0，且可以监听到滑动事件。
此时我们首先会考虑兼容性问题，比如定义这么一长串东西

const top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

但是还是没效果。

我怀你您将html和body height设置为100%，如果是，则删除它或使用min-height。

分析：如果将html和体高设置为100%，浏览器就会考虑100%的可见空间，因此不能滚动到任何地方，因为可以看到的空间已经是100%了，因为这是在css中强制设置的。文档包含在正文中，如果将正文高度设置为100%，如果文档高度大于可见空间，您希望看到什么?

在这里插入图片描述

吞石鱼
关注
解决bootstrap框架多层不受鼠标滚轮控制并且关闭之后body叠加padding-right解决方案
Technology_liu的博客
04-29 860
我在做我哦的毕业设计时出现了一个问题，就是第一层摸态框消失并且第二层摸态框显示就会出现modal不受鼠标滚轮控制并且关闭之后body就会padding-right叠加，那样整个页面效果不是非常好，那么怎么解决了，首先，如果第一个摸态框有button按钮，那么点击按钮时就是用延时器，在body上赋予“modal-body”类，代码如下： function btn_register() { ...
overflow：hidden；本意是隐藏超出文本框的内容，为什么能实现清除浮动和解决margin坍陷？
m0_37724356的博客
10-30 843
首先，清除浮动本质上是触发了BFC,只要是能触发BFC,就能清除浮动。那这里就得解释什么是BFC。 一、BFC定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。（其中Block-level box是display 属性为 block, list-item, table 的元素） 简单来说BFC的定义如下： 浮动元
css样式中写html{overflow-x:hidden},会导致$(window).scroll(function () {}滚动监听失效
07-26 589
css样式中写html{overflow-x:hidden},那么下面的代码就会 失效.滚动时,没效果. $(window).scroll(function () { if($(window).scrollTop()>=300) { //alert(1); $(".gotop").fadeIn(400); }else { $(".gotop").fadeOut(400); } }); 解决办法是把css中的 html,body{ overflow-x:hidden; } 修改为,即去掉htm
移动端overflow-x:hidden失效问题
huanlesyaya的博客
09-07 1708
今天运营小姐姐说有个移动端h5页面左右可以滑动，想要改成禁止不滑动，我看了下代码，发现如图 body里面其实是加了x轴溢出隐藏，但是没有起效果，还是可以左右滑动的。想不明白，于是我把body里面的overflow-x:hidden放到了body下面的第一个元素里面，结果是有用的。 所以尽量不要相对于body进行定位，而是给他加一个父元素，然后相对于父元素进行定位（一般给父元素添加position：relative）,再给父元素加上overflow:hidden 或 overflow-x：hidden 或 o
设置overflow-x:hidden之鼠标滚轮失效。
weixin_30478619的博客
08-09 1844
　　在很多情况下我们可能需要对页面，或iframe等容器设置overflow-x:hidden这个属性，用来强制取消横向滚动条，但是设置完后，鼠标的滚轮却无法使用了。 　　解决办法如下：css 中:html {overflow-x:hidden;}改为:html {overflow-x:hidden;overflow-y:auto;} 转载于:https://www.cnblo...
为什么元素的 scrollTop 一直为 0？
weixin_41990299的博客
12-09 565
最近在开发时，遇到一个理论与实践不相符的问题：明明 div 可以滚动，偏偏获取不到它的 scrollTop。 功能： 1. “返回顶部”按钮默认隐藏； 2. 当页面往下滚动到 200px 以后时，“返回顶部”按钮出现。 3. 当点击“返回顶部”按钮时，页面滚动到顶部。 草图： 思路： 1. 一开始让“返回顶部”按钮隐藏，监听 div 滚动事件，到达指定高度后，让按钮出现。 2. “返...
优化这段代码 if index == BackpackMainWindow.TAB.attr or index == BackpackMainWindow.TAB.backpack then self.titlePanel:Hiden() self.growPanel:Hiden() self.characterpanel:Show() self.honorPanel:Hiden() if index == BackpackMainWindow.TAB.attr then self.attrpanel:Show() self.backgridpanel:Hiden() elseif index == BackpackMainWindow.TAB.backpack then self.attrpanel:Hiden() self.growPanel:Hiden() self.backgridpanel:Show(self.openArgs) self.secondTab = nil end elseif index == BackpackMainWindow.TAB.title then self.characterpanel:Hiden() self.backgridpanel:Hiden() self.attrpanel:Hiden() self.growPanel:Hiden() self.titlePanel:Show(self.extra_param) self.honorPanel:Hiden() elseif index == BackpackMainWindow.TAB.grow then self.characterpanel:Hiden() self.backgridpanel:Hiden() self.attrpanel:Hiden() self.titlePanel:Hiden() self.growPanel:Show(0) self.honorPanel:Hiden() elseif index == BackpackMainWindow.TAB.honor then self.characterpanel:Hiden() self.backgridpanel:Hiden() self.attrpanel:Hiden() self.titlePanel:Hiden() self.growPanel:Hiden() self.honorPanel:Show() end
06-01
self.growPanel:Show(0) self.honorPanel:Hiden() end function BackpackMainWindow:ShowHonorPanel() self.characterpanel:Hiden() self.backgridpanel:Hiden() self.attrpanel:Hiden() self.titlePanel:...
FALCON-II-hiden.rar_驱动编程_C++_Builder_
08-11
通过Builder，开发者可以快速创建驱动程序的用户界面，设置事件处理机制，并方便地调用系统API进行硬件交互。 四、FALCON-II驱动的核心组件 1. 初始化模块：负责设置硬件寄存器，初始化显示控制器，确保设备正确...
chat-hiden-app
05-12
Android生产设置 android / gradle.properties 通过属性文件所在的路径修改 certificate.properties=/home/path/certificate.properties 属性文件示例 file=/home/RutaCertificado/chat.keystore file.password=...
欢迎 </>元素 控制台 源代码 内 应用程序 <!DOCTYPE html> <html class=" "> <head></head> <body class="theme-light el-popup-parent--hidden" style="padding-right: 8px;"> <svg xmlns=" http://www.w3.org/2000/svg " xmlns:xlink=" http://www.w3.org/1999/xlink " style="position: absolute; width: 0; height: 0" id="_SVG_SPRITE_NODE_">@</svg> <noscript></noscript> <div id="app">@</div> <!-- built files will be auto injected --> <script type="text/javascript" src="/static/js/chunk-vendors.js"></script> <script type="text/javascript" src="/static/js/app.js"></script> <div data-v-4ffa2090 class="el-dialog_wrapper" style="z-index: 2003;"> <div role="dialog" aria-modal="true" aria-label="环境/中心/角色切换" class="el-dialog" style="margin-top: 15vh; width: 30%;"> <div class="el-dialog_header"></div> <div class="el-dialog_body"></div> <div class="el-dialog_footer"> <span data-v-4ffa2090 class="dialog-footer"> <button data-v-4ffa2090 type="button" class="el-button el-button--default">@</button> <button data-v-4ffa2090 type="button"class="el-button el-button--primary">==$0 <!----> <!----> <span>确定</span> </button> </span> </div> </div> </div> <div class="v-modal" tabindex="0" style="z-index: 2002;"></div> </body> </html> html. body.theme-light.el-popup-parent-hiden div.el-dialog_ wrapper div.el-dialog div.el-dialog_ footer span.dialog-footer button.el-button.el-button--primary 怎么定位点击<button data-v-4ffa2090 type="button"class="el-button el-button--primary">==$0这个元素
最新发布
03-29
button = driver.find_elements(By.CSS_SELECTOR, "button.el-button.el-button--primary")[0] button.click() # 通过父元素定位（例如父元素id为"container"） button = driver.find_element(By.XPATH, "//div[@id...
移动端html的overflow:hidden属性失效问题
晨露
03-14 7139
移动端html的overflow:hidden属性失效问题这第一次做手机端网页，在交付测试的时候发现一个问题， 就是body的宽度，我设置了overflow:hidden,在谷歌调试的时候确实是不能滑动的，但是在手机端测试的时候发现，overflow:hidden是失效的。就是说，页面是也可以左右摇晃的，延展出去的部分会被扯来扯去= = 后来查阅了一些资料，了解到这是由于移动端的web内核不同意
隐藏滚动条overflow-y:hidden 不滚动问题解决
sw_onload的博客
06-23 7939
一般想要页面滚动又不想出现滚动条，网上大多回答是overflow-y:hidden,然而我发现并没卵用，反而造成页面无法滚动。要想真正实现效果，可以给父元素overflow:hidden 然后子元素设置overflow:scroll就能隐藏y轴的滚动条，但是x轴的还会出现。需要注意的是父元素需要设置高度或最小高度，否则会失效 ...
scrollTop方法无效问题
chenyouleww的博客
07-05 839
scrollTop方法失效
overflow-x滑动失效问题
FineDust的博客
02-20 1372
CSS滑动样式overflow-x问题处理
overflow-x横向滚动条不可滚动的原因
weixin_42342065的博客
12-14 1587
在工作中遇到一种比较特殊的情况，当div内容宽度超过外层div总宽度的时候添加横向滚动条overflow-x:auto，正常这样来操作是没有什么问题的，但是遇到一个很奇怪的问题，满足上面任何条件了，但是滚动条却滚动不了，原因排查后发现是因为。以上是遇到的比较奇葩的情况，在此记录下。
css:overflow-x: overlay火狐浏览器不生效没有滚动条出现
qq_45067263的博客
05-26 2467
项目场景： overflow-x: overlay是为了解决表格出现滚动条，会多出一小块位置，但是火狐浏览器对此不生效 解决方案： overflow-x: overlay; overflow: auto; 在 overflow-x: overlay;的基础上加个 overflow: auto;适配，但是多出来的那一块还会存在，但是首要问题是解决没有滚动条，多出来的一点无所谓，因为仅限火狐会有 ...
scrollTop获取一直为0的解决方法(vue3开发h5)
wanghao31的博客
02-25 2441
document.documentElement.scrollTop获取一直为0的解决
监听滚动条页面时使用window时不生效
weixin_45776308的博客
12-08 683
在mounted生命周期里面加。
scrollTop不生效的原因解决方法
热门推荐
前端小师姐迪迪_的博客
02-21 1万+
scrollTop 设置 不生效；scrollTop 一直为0；
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值