工作中写前端遇到的新知识

JS获取屏幕高度:

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

Jquery获取屏幕高度

$(document).ready(function(){
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
 
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
 
})

js获取元素的屏幕高度

元素的实际高度：document.getElementById("div").offsetHeight
元素的实际宽度：document.getElementById("div").offsetWidth
元素的实际距离左边界的距离：document.getElementById("div").offsetLeft
元素的实际距离上边界的距离：document.getElementById("div").offsetTop

js 获取滚动位置，滚动到指定位置，平滑滚动

document.documentElement.scrollTop || document.body.scrollTop;

两种监听页面滚动的方法

一、原生js通过window.onscroll监听

window.onscroll = function() {
  //为了保证兼容性，这里取两个值，哪个有值取哪一个
  //scrollTop就是触发滚轮事件时滚轮的高度
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  console.log("滚动距离" + scrollTop);
}

二、Jquery通过$(window).scroll()监听

$(window).scroll(function() {
  //为了保证兼容性，这里取两个值，哪个有值取哪一个
  //scrollTop就是触发滚轮事件时滚轮的高度
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  console.log("滚动距离" + scrollTop);
})

当用户滑到下一屏幕时再让其加载CSS3动画

<div class="box">
	<div id="div1"></div>
	<div id="div2"></div>
	<div id="div3"></div>
</div>
window.onscroll = function() {
        //为了保证兼容性，这里取两个值，哪个有值取哪一个
        //scrollTop就是触发滚轮事件时滚轮的高度
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        //获取div3距离屏幕顶部的高度
        let offsetTop=document.getElementById("div3").offsetTop;
        //获取div元素的高度
        let offsetHeight=document.getElementById("div3").offsetHeight
        console.log(offsetHeight)
        if (scrollTop+offsetHeight <= parseInt((offsetTop + (offsetHeight / 2.0)))) {
            console.log("开始加载动画");
            document.getElementById("div3").className = 'custom-animation';
        }
    }

onscroll是监听鼠标滚轮事件

鼠标滚轮事件

var scrollFunc = function (e) {  
        e = e || window.event;  
        if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件               
            if (e.wheelDelta > 0) { //当滑轮向上滚动时  
               alert('上滚')
            }  
            if (e.wheelDelta < 0) { //当滑轮向下滚动时  
                 alert('下滚')
            }  
        } else if (e.detail) {  //Firefox滑轮事件  
            if (e.detail> 0) { //当滑轮向下滚动时  
               alert('下滚')
            }  
            if (e.detail< 0) { //当滑轮向上滚动时  
                alert('上滚')  
            }  
        }  
    } 
    /*IE、Opera注册事件*/
    if(document.attachEvent){
        document.attachEvent('onmousewheel',scrollFunc);
 
    }
    //Firefox使用addEventListener添加滚轮事件  
    if (document.addEventListener) {//firefox  
        document.addEventListener('DOMMouseScroll', scrollFunc, false);  
    }  
    //Safari与Chrome属于同一类型
    window.onmousewheel = document.onmousewheel = scrollFunc; 
     /*
    event.wheelDelta 滚动方向
    上：120
    下：-120
    Firefox：event.detail 滚动方向
    上：-3
    下:3
    */ 

JQuery鼠标滚轮事件

 $(document).bind('mousewheel DOMMouseScroll',function(event){ //on也可以 bind监听
        //Chorme
        var wheel = event.originalEvent.wheelDelta;
        var detal = event.originalEvent.detail;
        if (event.originalEvent.wheelDelta) { //判断浏览器IE,谷歌滚轮事件               
            if (wheel > 0) { //当滑轮向上滚动时  
               alert('上滚')
            }  
            if (wheel < 0) { //当滑轮向下滚动时  
                 alert('下滚')
            }  
        } else if (event.originalEvent.detail) {  //Firefox滚轮事件  
            if (detal > 0) { //当滑轮向下滚动时  
               alert('下滚')
            }  
            if (detal < 0) { //当滑轮向上滚动时  
                alert('上滚')  
            }  
        }  
    });