scrollTop设置滚动定位的兼容问题

阿潺

已于 2023-12-06 17:21:26 修改

阅读量579

点赞数 6

CC 4.0 BY-SA版权

文章标签： html js

于 2023-12-06 17:15:46 首次发布

本文链接：https://blog.csdn.net/chengshaoying/article/details/134835220

本文讨论了在移动应用中，如何解决在不同型号手机上使用滚动定位功能的问题，特别是当在某些iOS设备上，`document.body.scrollTop`和`document.documentElement.scrollTop`行为不一致的情况。作者提供了正确的取值和赋值方法，强调了在兼容不同浏览器和渲染模式时的处理策略。

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

功能说明：详情页，点击评价页签会滚动定位到评价部分，点击详情会滚动到详情介绍部分，非tab切换。在不同型号手机有的会失效，原先代码：

if(document.body.scrollTop){
	document.body.scrollTop = 100;
}else{
	document.documentElement.scrollTop = 100;
}

调试后发现有个别手机使用document.body.scrollTop设置生效但页面未滚动时会出现document.body.scrollTop值为0（number类型）的情况，此时就走else啦
当前文档的渲染模式是怪异模式/混杂模式还是标准模式
let mode = document.compatMode； mdn截图在这里插入图片描述
现在文档多数会在html中设置成标准模式<!DOCTYPE html>，会获取到compatMode为“CSS1Compat”，但并不能保证使用document.documentElement.scrollTop 设置会生效。此次实践中ios出现此问题。

正确做法
1.scrollTop取值操作

const scrollTop = document.documentElement.scrollTop || document.body.scrollTop

2.scrollTop赋值操作

document.documentElement.scrollTop = 100;
document.body.scrollTop = 100;

取值比较好理解，用‘或’就可以。
赋值的话，两个属性页面未滚动情况下，值都为0，两个语句都走一遍不会报错，仅一个可赋值成功另一个应该是只读，再次读取值仍然为0。

参考：
https://juejin.cn/post/6847902220604669960
http://www.hzhcontrols.com/new-268927.html
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/compatMode