10-网页滚动距离

作者: 仰望_IT | 来源:发表于2019-05-14 09:21 被阅读0次

10-网页滚动距离
网页回到顶部实现方法
滚动条
解决SwipeRefreshView与WebView滚动冲突问题
overscroll-behavior: contain阻止滚动
Python爬虫（1）利用Selenium控制网页内嵌滚动条
《Chrome插件英雄榜》第94篇更新！SmoothScroll
2018-11-05-jQuery-实现对联广告
网页滚动截图
滚动获取距离

1. IE9及IE9以上的浏览器 (pageXOffset / pageYOffset)

  window.onscroll = function () {
      console.log(window.pageXOffset);
      console.log(window.pageYOffset);
  }

2. 标准模式下浏览器 (document.documentElement.scrollLeft / scrollTop)

      console.log(document.documentElement.scrollLeft);
      console.log(document.documentElement.scrollTop);

3. 混杂(怪异)模式下浏览器

      console.log(document.body.scrollLeft);
      console.log(document.body.scrollTop);

兼容性处理

  window.onscroll = function () {
      let {x, y} = getPageScroll();
      console.log(x, y);

      function getPageScroll() {
          let x, y;
          if (window.pageXOffset){ // IE9及IE9以上
              x = window.pageXOffset;
              y = window.pageYOffset;
          } else if (document.compatMode === "BackCompat"){   // IE9以下混杂模式
              x = document.body.scrollLeft;
              y = document.body.scrollTop;
          } else {    // IE9以下标准模式
              x = document.documentElement.scrollLeft;
              y = document.documentElement.scrollTop;
          }
          return {
              x: x,
              y: y
          }
      }
  }