scorllTop兼容性问题

最新推荐文章于 2023-12-06 17:15:46 发布

Chow Yun-thin

最新推荐文章于 2023-12-06 17:15:46 发布

阅读量302

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_44761507/article/details/118653445

版权

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在实现网页‘回到顶部’功能时遇到的浏览器兼容性问题。由于不同浏览器对scrollTop属性的支持不同，例如IE、Chrome、Firefox和Safari各有差异，导致代码无法正常工作。为了解决这个问题，文章提出了一个兼容性解决方案，通过使用window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0来获取滚动位置，确保在各种浏览器中都能正确显示‘回到顶部’按钮。此外，还提供了一个getTopScroll()函数用于获取页面滚动距离，以帮助实现跨浏览器的兼容性代码。

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

在实现“回到顶部”功能时，需要判断用户下拉页面的举例，来判断是否需要显示“回到顶部”的按钮。因此准备使用 document.body.scrollTop的值大小来判断。代码如下：

window.onscroll = function(){
	//滚动超出高度，显示按钮，否则隐藏
	var backtop = document.body.scrollTop;
    //滚动超过三分之一的屏幕高度时，将按钮从 display:none设置成block
    if(backtop >= (pagelookheight/3)){
		topbtn.style.display = "block";
	}
    //否则不显示
	else{
		topbtn.style.display = "none";
    }
}

但是上面的代码始终不起效果，原因是各浏览器下scrollTop存在差异

IE
- 对于没有doctype声明的页面，使用 document.body.scrollTop 或 document.documentElement.scrollTop来获取 scrollTop高度
- 对于有doctype声明的页面，则使用 document.documentElement.scrollTop来获取 scrollTop高度
Chrome、Firefox
- 对于没有doctype声明的页面，使用 document.body.scrollTop 来获取 scrollTop高度
- 对于有doctype声明的页面，则使用 document.documentElement.scrollTop来获取 scrollTop高度
Safari
- safari 比较特别，有自己获取scrollTop的函数： window.pageYOffset

因此，为了兼容所有浏览器，需要将原来单一的document.body.scrollTop换成

window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0

可以封装成如下的函数进行调用

//获得页面向左、向上卷动的距离
function getTopScroll(){
    return window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop || 0
}