获取窗口属性，获取dom尺寸，脚本化css（上）--＞查看滚动条距离，求可视区窗口尺寸的方法，查看元素的几何尺寸，让滚动条滚动，自动阅读器小程序-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52484354/article/details/117170347

一，查看滚动条的滚动距离

window.pageXOffset / pageYOffset   IE8及IE8以下不兼容

IE9以下的求滚动条距离距离:document.body.scrollLeft/document.body.scrollTop 
: document.documentElement.scorllLeft/document.documentElement.scorllTop
两个方法，但由于兼容性太差两个方法不一定在哪个浏览器管用,所以两个方法相加就是最后的滚动条距离
(因为两个方法一旦有一个方法有值另一个方法一定为0)

二，封装兼容性方法，求滚动轮滚动距离getScrollOffset() scroll是滚动的意思 offset尺寸的意思



function getScrollOffset(){
    if(window.pageXOffset){
        return{
            x : window.pageXOffset,
            y : window.pageYOffset
        }
    }else{
       return{
           x : document.body.scrollLeft+document.documentElement.scrollLeft,
           y : document.body.scrollTop+document.documentElement.scrollTop
       }
    }
}

三，求可视区窗口的尺寸


1.查看可视区尺寸  -->用html写的部分 控制台不算
window.innerWidth/innerHeight    -->IE8及IE8以下不兼容
2.document.documentElement.clientWidth/clientHeight -->标准模式下，任何浏览器都兼容  -->client是客户端的意思
  document.body.clientWidth/clientHeight  -->适用于怪异模式下的浏览器
(在html标签上面还有一个<!DOCTYPE html> 删除他就是怪异模式/混杂模式，不删除就是标准模式) -->两种渲染模式
怪异模式一经启动就会试图去兼容以前的语法-->比如写的是IE6的语法，用IE7打开他会有的不兼容，启动怪异模式的话会自动退回IE6的语法

四，封装兼容性方法，返回浏览器视口尺寸getViewportOffset() -->viewport是可视区窗口的意思 offset尺寸的意思

 function getViewportOffset(){
     if(window.innerWidth){
         return{
             w : window.innerWidth,
             h : window.innerHeight
         }                           compat-->意思为兼容性 compatMode-->意思为兼容模式
     }else{                  -->document.compatMode等于"CSS1Compat"的话为标准模式下--等 
                            于"BackCompat"--意思为向后兼容-为怪异模式
         if(document.compatMode === "BackCompat"){   
             return{
                 w : document.body.clientWidth,
                 h : document.body.clientHeight
             }
         }else{
             return{
               w : document.documentElement.clientWidth,
               h : document.documentElement.clientHeight
             } 
         }
     }
 }

五，查看元素的几何尺寸

domEle.getBoundingClientRect();  -->兼容性很好，返回的方法不是实时的
----实时指的是把他封装给一个变量，然后去改变要查的属性值，这个变量是不会实时跟着改变
该方法返回一个对象，对象里面有left,top,right,bottom等属性
left和top代表该元素左上角的x和y的坐标，right和bottom代表元素右下角的x和y坐标
height和width属性老版本IE并未实现  
例如：<div style="width:100px;height:100px;background-color:red;position:absolute;left:100px;top:100px;">
然后var div = document.getElementsByTagName('div')[0]; 
调用div.getBoundingClientRect  -->会返回bottom:200 height:100 right:200 
left:100 top:100 width:100;

另一个查看元素尺寸的方法：
dom.offsetWidth,dom.offsetHeight (视觉上的尺寸，包括padding border)
查看元素的位置
dom.offsetLeft,dom.offsetTop
对于无定位父级的元素，返回相对文档的坐标,对于有定位父级的元素,返回相对于最近的有定位的父级的坐标
dom.offsetParent-->返回最近的有定位的父级，如无返回body,body.offsetParent返回null

六,让滚动条滚动

window上有三个方法：scroll(x,y),scrollTo(x,y) ,scrollBy(x,y)
三个方法功能类似，用法都是将x,y坐标传入,即实现让滚动轮滚动到当前位置
区别：scrollBy会在之前的数据基础上做累加，其他两个不会累加规定什么位置就是什么位置

七，自动阅读器

自动阅读器，前提是有两个div按钮一个开始一个停止和超过一屏以上的文字才能向下自己滚动，key是给加锁防止产生多个定时器导致最后无法停止
var div = document.getElementsByTagName('div');
    var key=true;
    var time=0;
    div[0].onclick=function(){
        if(key){
          time = setInterval(function(){
               scrollBy(0,10);
           },60)
           key=false;
        }
    }
    div[1].onclick=function(){
        clearInterval(time);
        key=true;
    }