安卓和ios的scrollTop获取的值不一致的问题记录

最新推荐文章于 2023-12-06 17:15:46 发布
最新推荐文章于 2023-12-06 17:15:46 发布
阅读量1k 收藏 1
点赞数
分类专栏： JavaScript 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45626517/article/details/119612154
版权
在实现下拉刷新功能时，发现利用scrollHeight、clientHeight和scrollTop判断下拉条件的代码在Android和iOS设备上表现不一致。Android设备中，document.documentElement.scrollTop始终为0，而iOS设备中document.body.scrollTop始终为0。解决办法是对不同平台进行兼容处理，Android设备使用document.body.scrollTop，iOS设备使用document.documentElement.scrollTop。
摘要由CSDN通过智能技术生成

         一段下拉刷新的代码出现了兼容bug，按理说利用 scrollHight <= clientHight * 2 + scrollTop 就能判断出下拉的情况，然后在触发刷新函数。代码如下：

        但是在使用document.documentElement.scroll获取滚动值的时候，在ios上可以得到对应的值，但是在安卓上不管怎么滑动怎么都是0。

        之后我就换成document.body.scrollTop,如下：

         然后就更奇妙了，发现在ios上不管怎么滑都是0，反倒是安卓上可以得到相对应的值。

        然后在网上找问题，知道

最低0.47元/天 解锁文章
我只是想饮一杯奶茶
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IOS中scrollsToTop问题小结
集结号
06-19 2万+
scrollsToTop小结 UIScrollView是用来展示滚动的一个类。他有UITableView、UITextView等子类， scrollsToTop是UIScrollView的一个属性，主要用于点击设备的状态栏时，是scrollsToTop == YES的控件滚动返回至顶部。 每一个默认的UIScrollView的实例，他的scrollsToTop属性默认为YES，所
使用scrollTop(）解决IOS中输入法遮挡输入框问题
08-29
使用 scrollTop() 函数可以解决 IOS 中输入法遮挡输入框问题，该方法简单易行，且无需使用其他复杂的解决方法。希望这篇文章能够对您有所帮助。 六、结语 本文系小编给大家介绍的使用 scrollTop() 函数解决 IOS 中...
iOS 11 scroll滚动偏移，tableview偏移44，获取view的宽和高
weixin_34273481的博客
06-29 1079
1. tableview 的头部 有44的偏移量 1>.设置 tableview的 属性 tableView.scrollIndicatorInsets = UIEdgeInsets.zero self.translatesAutoresizingMaskIntoConstraints = false if...
Vue列表滚动底部加载更多及Scroll在IOS下兼容问题导致数据重复的解决
米拉
06-26 1077
列表滑动至底部加载更多，效果如下： Android下效果如期，在Ios下会出现在屏幕滑动时会多次触发scroll事件给后台发送请求，导致申请数据重复的问题， 解决方法是定义一个全局变量，每次申请数据时都去判断这个变量的值。 HTML： <ul class="List"> <li v-for="(list,id) in listData" :key="id" @click="ToContent(list.orderid)"> <span
【bug记录】移动端使用scrollTop失效并一直为0（移动端 手机 真机）
qq_38261819的博客
05-24 1027
使用scrollTop失效并一直为0（移动端 手机 真机） 问题 今天在浏览器的仿真界面中，scrollTop 数值正常，可以正常显示。但是在真机上面 scrollTop的值一直为 0 不发生变化。(表现状态为到达页头部锚点失效) 解决 html与 body 的 height 不要设置为 100%。设置为 min-height如果不是必须的可以删除。 body { width: 100%; min-height: 100vh; } 把原来的 定义的 doc...
uniapp微信小程序scroll-view滚动scrollLeft不准确
T3165919332的博客
07-26 2326
但是这种方法会影响性能，这是因为关闭节流后,onScroll 事件会在每次滚动时触发,可以提高滚动位置监测的精确度。但需要注意的是,这会增加一定的性能消耗,如果滚动区域很大,滚动频繁,会带来较大的计算压力。所以在复杂场景下,我们还是建议保留系统的节流行为。原因：因为每次滚动监听事件都会被调用比较耗费资源系统会默认节流，可以在scroll-view 加一个。今天在实现微信小程序的一个横向导航的时候出现了一个问题，就是每次滑到滚动条最右边的时候。如果不想消耗过多性能,又想实现精确的滚动监听，怎么办？
vue项目设置scrollTop不起作用(总结)
10-17
本文总结了在Vue项目中设置scrollTop不起作用的问题，并提供了解决方案。 问题描述： 在开发过程中，当页面内容较长，分为多个模块，每个模块都有对应的标题，点击标题后需要滚动到相应模块内容位置。为了实现这一...
解决VUE中document.body.scrollTop为0的问题
12-09
Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD，即指定...
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
12-10
如果这个属性不可用，代码会依次尝试 `document.documentElement.scrollTop` 和 `document.body.scrollTop`，以确保在各种环境下都能获取正确的滚动值。最后，如果没有其他方式获取到滚动值，就默认为 0。 总的来说...
IOS/Safari下document对象的scrollHeight值比Chrome更大
weixin_30399797的博客
07-04 682
之前写滚动加载更多需求时，写了这样一段错误代码 应该获取滚动列表的scrollHeight、clientHeight和scrollTop而不是整个页面的。 因为整个页面不仅包括了滚动列表，还包括了头部，导致产生了BUG:在IOS下无法滚动加载更多。 虽然bug解决了，解决办法是给滚动列表加上ref,然后通过$refs来访问dom节点获取更加准确的scrollHeight、cli...
scrollTop(）解决IOS中输入法遮挡输入框
背包里的护身符的博客
09-27 1219
经过测试，发现有的IOS浏览器上输入法会弹出遮挡输入框，网上很多都是介绍用以下方法 (function() { $(‘input’).on(‘click’, function () { var target = this; // 使用定时器是为了让输入框上滑时更加自然 setTimeout(function()
document.documentElement.scrollTop在安卓上失效解决方案
Jana Jing的分享
02-21 5007
解决办法： 　　const top = document.documentElement.scrollTop||document.body.scrollTop;
iOS scrollsToTop属性失效
liuxu0718的专栏
06-12 2613
iOS scrollsToTop属性失效
关于scrollTop的兼容问题
二次猿的博客
11-17 855
1、各浏览器下 scrollTop的差异
iOS scrollsToTop失效解决
风中的劲草
12-09 4980
失效场景： 当一个控制器上有多个UIScrollView 失效的原因: On iPhone, we execute this gesture only if there’s one on-screen scroll view with scrollsToTop == YES. If more than one is found, none will be scrolled. scrollv...
uniapp中使用fixed固定定位导致ios和安卓差异解决办法
weixin_46390926的博客
12-16 5333
uniapp中使用fixed固定定位导致ios显示有问题，h5端可以直接设置，app端需要加calc（直接使用var(–top-window-height在css里面会报错），这样写安卓和ios都可以正常显示了 position: fixed; top: 88rpx; /* #ifdef APP-PLUS */ top: calc(var(--top-window-height) + 0px); /* #endif */ -webkit-overflow-scroll:touch; left: 0; dis
uniapp使用Mescroll（上拉加载下拉刷新）
_小郑有点困了的博客
03-17 1741
uniapp使用Mescroll 官网：https://www.mescroll.com/ 1.安装 2.全局引入 import MescrollBody from "mescroll-uni/mescroll-body.vue" import MescrollUni from "mescroll-uni/mescroll-uni.vue" Vue.component('mescroll-body', MescrollBody) Vue.component('mescroll-uni', Mescroll
scrollTop设置滚动定位的兼容问题
最新发布
知己知彼的百战不殆
12-06 445
调试后发现有个别手机使用document.body.scrollTop设置生效但会出现document.body.scrollTop值为0（number类型）的情况，此时就走else啦。，会获取到compatMode为“CSS1Compat”，但并不能保证使用document.documentElement.scrollTop 设置会生效。赋值的话，两个属性页面未滚动情况下，值都为0，两个语句都走一遍不会报错，仅一个可赋值成功另一个应该是只读，再次读取值仍然为0。现在文档多数会在html中设置成标准模式。
获取整个页面的scrollTop值
05-24
你可以使用 `document.documentElement.scrollTop` 或者 `document.body.scrollTop` 来获取整个页面的 scrollTop 值。这两种方法在不同浏览器中有所不同，因此可以结合使用，如下所示： ``` const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; console.log(scrollTop); ``` 请注意，如果你想监视页面滚动事件，并在滚动时获取最新的 scrollTop 值，可以使用 `window.addEventListener('scroll', callback)` 来注册一个事件监听器。在事件处理函数中，你可以使用上述代码来获取最新的 scrollTop 值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值