JavaScript Scroll家族以及封装

JavaScript Scroll家族以及封装

  • scrollTop & scrollLeft 别卷去的值,就是当滑动滚轮浏览网页的时候,网页隐藏在屏幕上方或左侧的距离

  • 获得scrollTop 或者 scrollLeft的值有三种方式

    • 支持谷歌浏览器和没有声明<!DOCTYPE html>:document.body.scrollTop
    • 支持火狐和其它浏览器: document.documentElement.scrollTop
    • 支持ie9+ 和 最新浏览器 : window.pageXOffset
  • 兼容写法

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  • 封装自己的scroll
function scroll() {
     // 获取scrollTop  和  scrollLeft有三种方式
     // 1.ie9+ 以及其他新的浏览器支持的 --> window.pageXOffset  window.pageYOffset
     // 2.谷歌浏览器和没有声明<!DOCTYPE html>的 --> document.body.scrollLeft  document.body.scrollTop
     // 3.火狐和其他浏览器支持的 --> document.documentElement.offsetLeft  document.documentElement.offsetTop
     if(window.pageXOffset != null) { // ie9+ 以及其他新浏览器
         return {left : window.pageXOffset, top : window.pageYOffset};
     } else if(document.compatMode == "CSS1Compat") { // 声明了<!DOCTYPE html>
         return {left : document.documentElement.offsetLeft, top : document.documentElement.offsetTop};
     } else { // 剩下的怪异浏览器
         return {left : document.body.offsetLeft, top : document.body.offsetTop};
     }
}
原文地址:https://www.cnblogs.com/gchlcc/p/6709625.html