zoukankan      html  css  js  c++  java
  • 滚动条详解及制作(一)

    查看滚动条的滚动距离

    js中有两套方法可以查看当前滚动条的滚动距离。

    第一套是这样的:

    window.pageXOffset/window.pageYOffset

    这个方法可以查看滚动条的横轴和纵轴的滚动距离,但是很遗憾的是IE8以及以下的版本不兼容。

    因此针对于IE,我们就需要有第二套方法:

    document.body.scrollLeft/doucment.body.scrollTop

    document.documentElement.scrollLeft/document.documentElement.scrollTop

    虽然IE可以使用这两个方法,但是这两个方法不仅仅是IE才可以使用。

    这里要说明的是,这两种方法要一起使用,因为浏览器的兼容性问题,有的浏览器是document.body有值,有的是document.documentElement有值,但是所有的浏览器都只有一个有值,不会两个都有或者一个都没有,而且这里的没有值不代表是null,而是0,因此我们使用的时候一般都是两个一起使用。

    针对兼容性的问题,我们现在就可以封装一个函数,求滚动条滚动距离的方法。

    
    
     1 function getScrollOffset(){
     2         if(window.pageXOffset) {
     3               return {
     4                     x: window.pageXOffset,
     5                     y: window.pageYOffset
     6               }
     7         }
     8         return {
     9               x: document.body.scollTop + document.documentElement.scrollTop,
    10               y: document.body.scrollLeft + document.documentELement.scrollLeft;
    11   }
    JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

    当浏览器不是IE的时候,可以直接使用window.pageXOffset和window.pageYOffset的方法,当没有这两个的时候,我们才需要来计算。

  • 相关阅读:
    【白嫖】0002 11款 Procreate 皮肤纹理笔刷
    30款 Procreate 书法笔刷 你值得拥有
    PaddleHub(3)
    PaddleHub(2)
    关于大学学习的小思考
    PaddleHub(1)
    OO TA——一次非同寻常的体验
    Vue实现增加删除检索数据
    闲言碎语
    析 合 树 详 解
  • 原文地址:https://www.cnblogs.com/pandawind/p/10033769.html
Copyright © 2011-2022 走看看