1. screen对象包含有关客户端显示屏幕的信息
    2. screen.availWidth  // 屏幕的宽度
    3. screen.availHeight // 屏幕的高度
    5. screen.height  // 屏幕分辨率的高
    6. screen.width   // 屏幕分辨率的宽
    1. // 获取屏幕的宽度
    2. var screenWidth = window.screen.availWidth;
    3. console.log(screenWidth);
    5. // 获取屏幕的可视区
    6. var viewWidth = document.body.clientWidth;
    7. console.log(viewWidth);
    9. /*获取屏幕可视区域高度*/
    10. var vh = document.documentElement.clientHeight;
    11. console.log(vh);
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <style>
    9.         *{margin: 0;padding: 0;}
    10.         body{height: 2000px;}
    11.         div{width: 300px;height: 1700px;background-color: lightcoral;}
    12.     </style>
    13. </head>
    14. <body>
    15.     <div></div>
    16.     <script>
    17.         var bodyH = document.body.clientHeight;
    18.         var vh = document.documentElement.clientHeight;
    19.         console.log(bodyH);
    20.         console.log(vh);
    21.         /**
    22.          * 滚动条滚动距离 + vh = bodyH
    23.         */
    24.         window.onscroll = function(){
    25.             var top = window.scrollY;
    26.             console.log(top);
    27.         }
    28.         /*top + vh == bodyH     判断滚动条到达底部*/
    29.     </script>
    30. </body>
    31. </html>