页面滚动到浏览器可视区域动画播放

//可视区域的高
window.innerHeight || doucument.documentElement.clientHeight || document.body.clientHeight

//整个网页的高(不包括边框)
 docunment.body.scrollHeight;

//整个网页的高(包括边框)
 docunment.body.offsetHeight;

//整个网页的滚动距离
document.body.scrollTop || window.pageXOffset
document.body.scrollleft|| window.pageYOffset

//元素在文档的坐标
element.offsetTop
element.offsetLeft

//元素滚动到页面的指定位置
element.scrollTo

元素滚动可视区域动画生效

window.onscroll = function (){
    var srollTop = document.body.scrollTop;
    var windowHeight = window.innerHeight || doucument.documentElement.clientHeight || document.body.clientHeight;
    var htmlHeight = element.offsetTop;
    if(srollTop + windowHeight > htmlHeight){
        ...
    }

}

元素滚动可视区域一定距离后动画生效(比如滚动100px)

window.onscroll = function (){
    var srollTop = document.body.scrollTop;
    var windowHeight = window.innerHeight || doucument.documentElement.clientHeight || document.body.clientHeight;
    var htmlHeight = element.offsetTop;
    if(srollTop + windowHeight -100 > htmlHeight){
        ...
    }

}