JS操作html元素中的scroll

web.jpeg

之前有说过offset的一些属性值，

offset系列:

• offsetLeft:距离左边位置的值
• offsetTop:距离上面位置的值
• offsetWidth:元素的宽(有边框)
• offsetHeight:元素的高(有边框)

scroll (内容区域的真实情况)

• scrollWidth和scrollHeight
  • 如果div里面没有内容，那么上面属性就是div默认的宽度和高度
  • 如果div里面有内容，并且内容区域大于div指定高度或者宽度，获取的scrollWidth和scrollHeight就是内容的真实宽度和高度

<script>

    var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    btn.onclick = function(){
       // scrollWidth 内容的真实宽度
      //如果div里面没有内容，就是div默认的宽度
        console.log(box.scrollWidth);
        //如果有内容，并且内容区域大于div默认的高度，就是内容区域的高度
        console.log(box.scrollHeight);

        //
        
    }

</script>

image.png

• scrollTop和scrollLeft 是内容区域滚动出去的距离
  image.png

页面的滚动事件onscroll

不同的浏览器在在滚动事件中获取到滚动的距离是不一样的

• 谷歌浏览器 和没有声明 DTD <DOCTYPE >：使用 document.body.scrollTop;获取向上滚动的距离
• 火狐 和其他浏览器 使用： document.documentElement.scrollTop; 获取向上滚动的距离
• ie9+ 和 最新浏览器 都认识 window.pageXOffset pageYOffset （scrollTop）
• document.compatMode判断是否怪异浏览器 CSS1Compat 已经声明，BackCompat 未声明

 function getScroll(){
    return{
        top:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop || 0,
        left:window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
    }
 }

//或者 

function scroll() {
    if (window.pageXOffset || window.pageYOffset){
      return {
        left: window.pageXOffset,
        top: window.pageYOffset
      };
    }else if (document.compatMode === 'CSS1Compat'){
      // w3c标准
      return {
        left: document.documentElement.scrollLeft,
        top: document.documentElement.scrollTop
      }
    }else {
      // 怪异
      return {
        left: document.body.scrollLeft,
        top: document.body.scrollTop
      }
    }
  }