功能说明:详情页,点击评价页签会滚动定位到评价部分,点击详情会滚动到详情介绍部分,非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;
现在文档多数会在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