FireFox与Chrome的scrollTop的兼容问题

做页面时需要判断页面滚动距离让列表对应文字变色,之前直接用document.body.scrollTop获取滚动距离,结果打开火狐发现不可以,获取不到

原生接口测试

Paste_Image.png

document.documentElement<html> 元素,而 document.body<body> 元素。

测试结果,在火狐上只能通过html元素来获取和设定页面滚动高度,而在谷歌上反之只能用body元素来获取和设定

jquery接口测试

Paste_Image.png

采用 $(document) 可以实现对获取和设定scrollTop的兼容

scrollTop动画实现测试

虽然实现了兼容,但为了有更好的效果,希望采用动画的方式滚动到页面的某位置,而不是直接跳转,这里采用jqueryanimate 函数来实现。

Paste_Image.png

发现虽然可以采用$(document)来实现获取和设定,但动画效果都无法使用,还是只能用body元素和html元素来实现。

最终解决

  • 获取或直接设定当前页面滚动高度:
    $(document).scrollTop();//获取,兼容火狐谷歌
  • 有动画效果的设定当前页面滚动高度:
    $("body,html").animate({ scrollTop: ... });//动画滚动效果,兼容火狐谷歌

如果想完美兼容各大浏览器的scrolltop

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

ie8、7、6 兼容scroll事件

$(window).bind("scroll",function(){ //…… });

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Window和document对象的区别 window对象window对象表示浏览器中打开的窗口window对象是...
    FConfidence阅读 6,740评论 0 5
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 7,756评论 0 8
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,428评论 4 61
  • 我心余有泣 淡如水中细 开磐刀斧来 抑郁无从济
    支持小耗子的大耗子阅读 1,612评论 1 1

友情链接更多精彩内容