檢視滾動條的距離

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
        }
    }
}

檢視視口的尺寸

function getViewportOffset(){
    if(window.innerWidth){
        return {
            w:window.innerWidth,
            h:window.innerHeight
        }
    }else{
        if(document.compatMode === "BackCompat"){
            return {
                w:document.body.clientWidth,
                h:document.body.clientHeight
            }
        }
 
else{
            w:document.documentElement.clientWidth,
            h:document.documentElement.clientHeight
        }
    }
}

讓滾動條滾動
window上有三個方法
scroll(x,y),
scrollTo(x,y),
scrollBy(x,y);//會在之前的基礎上做累加

利用scrollBy()快速閱讀的功能

var start = document.getElementsByTagName("div")[0];
var stop = document.getElementsByTagName("div")[1];
 
var timer = 0;
var key = true;
start.onclick = function(){
    if(key){
        timer = setInterval(function(){
            window.scrollBy(0,10);
        })
        key = false;
    }
}
stop.onclick = function(){
    clearInterval(timer);
    key = true;
}

window.getComputedStyle(ele,null);

計算樣式只讀，返回的值是絕對值,null是取偽類元素的值

div::after{
    content:"";
    width:20px;
    height:50px;
    background-color:green;
    display:inline-block;
}

function getStyle(elem,prop){
    if(window.getComputedStyle){
        return window.getComputedStyle(elem,null)[prop];
    }else{
        return elem.currentStyle[prop];
    }
}

var div = document.getElementsByTagName("div")[0];
setInterval(function(){
    // div.style.left = getStyle(div,left);
    div.style.left = parseInt(getStyle(div,'left'))+1+"px"
},100)