关于Chrome浏览器document.body.scrollTop一直为0的问题
本文由 小茗同学 发表于 2018-04-17 浏览(14033)
最后修改 2018-04-17 标签:chrome scroll document

背景

前阵子突然发现博客的目录导航只要一滚动就会消失,其中有一段这样的代码:

$(window).on('scroll', function(e)
{
	var top = document.body.scrollTop;
	if(top <= 100) $('.markdown-nav-wrapper').addClass('hide');
	else if(localStorage[storageId]!='false') $('.markdown-nav-wrapper').removeClass('hide');
});

后来发现是因为document.body.scrollTop一直获取都是0。发现不知道从Chrome哪个版本开始,页面最外层的滚动放到document上面去了,而不是body,所以获取需要用document.documentElement.scrollTop,自信满满地改成documentElement之后就没管了,谁知下班到家用家里电脑访问时又出问题了。

正文

经测试,家里的Chrome/55.0使用document.body.scrollTop才能获取到正确的值,而公司的Chrome/63.0必须使用document.documentElement.scrollTop才能获取到,因为是最近才发现这个问题,所以应该是最近Chrome哪个版本开始更改的。

事实上,经查资料,IEFirefox一直都是documentElement,唯独Chrome有点特殊,不过现在也回归大众了,也改成documentElement了。

考虑到无论兼容性如何,这二者肯定只能有一个有值,所以大可以像下面这样写来解决兼容性问题:

// 获取body滚动像素值
var top = document.body.scrollTop + document.documentElement.scrollTop;

当然其实还可以利用window.pageYOffset来获取,绝大部分浏览器下都没啥兼容性,据说,IE要求IE8以上,本人未亲测。