image.png
image.png
红色：浏览器窗口
蓝色：页面 当滚动条在最上面时页面的样子
紫色：滚动后的页面
image.png
image.png
image.pngHriHeight

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title></title>
  9.     <style>
  10.         body {
  11.             margin: 0;
  12.         }
  13.     </style>
  14. </head>
  16. <body>
  17.     <div style="height:  400px;border: 1px solid #000;"></div>
  18.     <button>click</button>
  19.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  20.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  21.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  22.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  23.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  24.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  25.     <script>
  26.         // console.log(window.pageYOffset)
  27.         // console.log(window.pageXOffset)
  28.         var oBtn = document.getElementsByTagName('button')[0];
  29.         oBtn.onclick = function () {
  30.             window.scrollTo(0, 400)
  31.         }
  32.     </script>
  33. </body>
  35. </html>

400距离，滚动条的距离与实际滚动距离不一样，是缩放的，因为如果手鼠标要移动400的距离才能让窗口移动400距离，那样就太慢了，考虑可用性
滚动条的距离，不是实际页面滚动条滚动的距离

1.window.pageXOffset、document.body.scrollLeft

pageXOffset 返回文档在窗口左上角水平的像素。

pageYOffset 返回文档在垂直方向滚动的像素。

封装滚动插件(兼容IE)

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title></title>
  9.     <style>
  10.         body {
  11.             margin: 0;
  12.         }
  13.     </style>
  14. </head>
  16. <body>
  17.     <div style="height:  400px;border: 1px solid #000;"></div>
  18.     <button>click</button>
  19.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  20.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  21.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  22.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  23.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  24.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  25.     <script>
  26.         // console.log(window.pageYOffset)
  27.         // console.log(window.pageXOffset)//滚动条偏移的距离 滚动的距离 没有滚动为0
  28.         var oBtn = document.getElementsByTagName('button')[0];
  29.         oBtn.onclick = function () {
  30.             window.scrollTo(0, 400)
  31.         }
  32.     </script>
  33. </body>
  35. </html>

image.png
结合上面点击移动滚动条的代码，写兼容性的获取偏移代码

  1.     function getScrollOffset(){
  2.         if(window.pageXOffset){
  3.             return{
  4.                 left:window.pageXOffset,
  5.                 top:window.pageYOffset
  6.             }
  7.         }else{
  8.             return{
  9.                 left:document.body.scrollLeft + document.documentElement.scrollLeft,
  10.                 top:document.body.scrollTop + document.documentElement.scrollTop
  11.             }
  12.         }
  13.     }
  1.     function getScrollOffset(){
  2.       //返回滚动条滚动的距离
  3.         if(window.pageXOffset){
  4.           //新的api支持，如果不存在走旧的api
  5.             return{
  6.                 left:window.pageXOffset,
  7.                 top:window.pageYOffset
  8.             }
  9.         }else{
  10.           /*旧的api,分为标准模式，怪异模式，因为必有一方恒定为0，另一方不为0，
  11.           为正常正确的值，所以可以不用判断2次，直接相加就行了，返回正常正确的值
  12.           */
  13.             return{
  14.                 left:document.body.scrollLeft + document.documentElement.scrollLeft,
  15.                 top:document.body.scrollTop + document.documentElement.scrollTop
  16.             }
  17.         }
  18.     }

2.兼容模式

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Quirks_Mode_and_Standards_Mode
image.png
向后兼容，dom规范标准是w3c制定的，4的版本与10的版本不一样，有语法变化，全世界浏览器都往w3c兼容，写上就兼容w3c，写别的就兼容自己制定的格式，有可能是第1个、2个版本。比w3c制定的版本老。一般浏览器厂商会兼容5个版本，向后兼容5个版本
标准模式 ：向前兼容 ，兼容ie8的w3c规范
兼容模式：怪异模式、标准模式都是兼容模式，不是最新的模式
image.png
731
innerWidth与clientWidth一样

image.png
去掉<!DOCTYPE html>后的结果
image.png

image.png
0
当标准模式式，clientHeight不起作用，怪异模式时起作用

处于怪异模式下
image.png
不同的模式下，同样的方法结果会不同
通过判断兼容模式，来写封装
image.png

  1. <!DOCTYPE html>

HTML文档头写 <!DOCTYPE html> 则使用W3C规范 标准模式
不写则用浏览器自己的规范 怪异模式
怪异模式用自己的格式，兼容模式一般向后兼容5个版本

测试方法 document.compatMode

  1. document.compatMode === "CSS1Compat" //W3C 
  2. document.compatMode === "BackCompat" //怪异模式

3.window.innerWidth、document.body.clientWidth、document.documentElement.clientWidth

innerheight 返回窗口的文档显示区的高度。浏览器窗口宽度

innerwidth 返回窗口的文档显示区的宽度。

封装可视窗口尺寸

  1.     function getViewportSize(){
  2.         if(window.innerWidth){
  3.             return{
  4.                 width:window.innerWidth,
  5.                 height:window.innerHeight
  6.             }
  7.         }else{
  8.             if(document.compatMode==='BackCompat'){
  9.                 return{
  10.                     width:document.body.clientWidth,
  11.                     height:document.body.clientHeight
  12.                 }
  13.             }else{
  14.                 return {
  15.                     width:document.documentElement.clientWidth,
  16.                     height:document.documentElement.clientHeight
  17.                 }
  18.             }
  19.         }
  20.     }
  1.   function getViewportSize(){
  2.     //返回可视窗口的宽高，与滚动条无关，与浏览器全屏半屏有关
  3.         if(window.innerWidth){
  4.             return{
  5.                 width:window.innerWidth,
  6.                 height:window.innerHeight
  7.             }
  8.         }else{
  9.           //兼容模式：标准模式 怪异模式
  10.           //如果怪异模式
  11.             if(document.compatMode==='BackCompat'){
  12.                 return{
  13.                     width:document.body.clientWidth,
  14.                     height:document.body.clientHeight
  15.                 }
  16.             }else{
  17.               //标准模式
  18.                 return {
  19.                     width:document.documentElement.clientWidth,
  20.                     height:document.documentElement.clientHeight
  21.                 }
  22.             }
  23.         }
  24.     }

4.document.body.scrollWidth、document.documentElement.scrollWidth

偏移量加上浏览器窗口的大小,一共的大小，窗口加上偏移量

  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></title>
  8.     <style>
  9.         body{
  10.             margin: 0;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div style="width: 5000px; height: 5000px; 
  16.     border: 1px solid #000;"></div>
  17.     <!-- <div style="width: 10px; border: 1px solid red;"></div> -->
  18.     <script>
  19.         console.log(document.body.scrollWidth);//5002 滚动条一共能移动的范围 就是body的大小 与滚动条是否滚动无关
  20.         console.log(document.body.scrollHeight)//5002
  21.         console.log(document.documentElement.scrollHeight)//5002
  22.         console.log(document.documentElement.scrollWidth)//5002
  24. </script>
  25. </body>
  26. </html>

封装body大小

  1. //一共的大小, 窗口加上偏移量   
  2. function getScrollSize(){
  3.         if(document.body.scrollWidth){
  4.             return {
  5.                 width:document.body.scrollWidth,
  6.                 height:document.body.scrollHeight
  7.             }
  8.         }else{
  9.             return {
  10.                 width:document.documentElement.scrollWidth,
  11.                 height:document.documentElement.scrollHeight
  12.             }
  13.         }
  14.     }

5.offsetLeft、offsetTop、offsetParent

getBoundingClientRect

  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></title>
  8.     <style>
  9.         .box{
  10.             position: absolute;
  11.             top: 200px;
  12.             left: 200px;
  13.             width: 200px;
  14.             height: 200px;
  15.             margin: 10px;
  16.             padding: 10px;
  17.             background-color: green;
  18.         }
  19.     </style>
  20. </head>
  22. <body>
  23.     <div class="box"></div>
  24.     <script>
  25.         var box=document.getElementsByClassName('box')[0];
  26.         var info=box.getBoundingClientRect();
  27.         box.style.width='400px';
  28.         console.log(info)
  29.     </script>
  30. </body>
  31. </html>

封装元素距离上、左边距的距离方法

  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></title>
  8.     <style>
  9.         .box{
  10.             position: absolute;
  11.             top: 100px;
  12.             left: 100px;
  13.             width: 100px;
  14.             height: 100px;
  16.             background-color: green;
  17.         }
  18.     </style>
  19. </head>
  21. <body>
  22.     <div class="box"></div>
  23.     <script>
  24.         var box=document.getElementsByClassName('box')[0];
  25.         console.log(box.offsetLeft);//100
  26.         console.log(box.offsetTop);//100
  27.     </script>
  28. </body>
  29. </html>
  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></title>
  8.     <style>
  9.         .parent{
  10.             position: relative;
  11.             top: 100px;
  12.             left: 100px;
  13.             width: 300px;
  14.             height: 300px;
  15.             background-color: #999;
  16.         }
  17.         .son{
  18.             position: absolute;
  19.             top: 100px;
  20.             left: 100px;
  21.             width: 100px;
  22.             height: 100px;
  24.             background-color: green;
  25.         }
  26.     </style>
  27. </head>
  29. <body>
  30.     <div class="parent">
  31.         <div class="son"></div>
  32.     </div>
  33.     <script>
  34.         var son=document.getElementsByClassName('son')[0];
  35.         console.log(son.offsetLeft);//100 son在parent中的偏移距离，son相对于parent的偏移距离，与其他无关，相对静止，以谁为参考物，就可以判断与其他的什么无关，与什么有关
  36.         console.log(son.offsetTop);//100
  37.     </script>
  38. </body>
  39. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title></title>
  9.     <style>
  10.         body {
  11.             margin: 0;
  12.         }
  14.         .grandPa {
  15.             position: absolute;
  16.             top: 100px;
  17.             left: 100px;
  18.             width: 360px;
  19.             height: 360px;
  20.             background-color: #ccc;
  21.         }
  23.         .parent {
  24.             position: absolute;
  25.             top: 30px;
  26.             left: 30px;
  27.             width: 300px;
  28.             height: 300px;
  29.             background-color: #999;
  30.             overflow: hidden;
  31.         }
  33.         .son {
  34.             position: absolute;
  35.             top: 100px;
  36.             left: 100px;
  37.             width: 100px;
  38.             height: 100px;
  39.             background-color: green;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44.     <div class="grandPa">
  45.         <div class="parent">
  46.             <div class="son"></div>
  47.         </div>
  48.     </div>
  50.     <script>
  51.         var son = document.getElementsByClassName('son')[0];
  52.       //从可视窗口左上角到el元素左上角的距离，与滚动条无关
  53.         function getElemDocPosition(el) {
  54.             var parent = el.offsetParent,
  55.                 offsetLeft = el.offsetLeft,
  56.                 offsetTop = el.offsetTop;
  57.             while (parent) {
  58.                 offsetLeft += parent.offsetLeft;
  59.                 offsetTop += parent.offsetTop;
  60.                 parent = parent.offsetParent;
  61.             }
  62.             return {
  63.                 left: offsetLeft,
  64.                 top: offsetTop
  65.             }
  66.         }
  67.         console.log(getElemDocPosition(son))
  68.     </script>
  69. </body>
  71. </html>

从可视窗口左上角到son左上角的距离，与滚动条无关
son以可视窗口左上角为标椎物的位置
image.png

  1.  <body>
  2.         <div class="grandPa">
  3.         <div class="parent">
  4.             <div class="son"></div>
  5.         </div>
  6.     </div>
  7. </body>
  8. <script>
  9.     var son = document.getElementsByClassName('son')[0];
  10.     function getElemDocPosition(el){
  11.         var parent = el.offsetParent,
  12.             offsetLeft = el.offsetLeft,
  13.             offsetTop = el.offsetTop;
  14.         while(parent){
  15.             offsetLeft += parent.offsetLeft;
  16.             offsetTop += parent.offsetTop;
  17.             parent = parent.offsetParent;
  18.         }
  19.         return {
  20.             left: offsetLeft,
  21.             top: offsetTop
  22.         }
  23.     }
  24. </script>

6.window.scroll()、window.scrollTo()、window.scrollBy()

  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></title>
  8. </head>
  9. <body>
  10.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  11.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  12.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  13.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  14.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  15.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  16.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  17.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  18.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  19.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  20.     <script>
  21.         window.scroll(800,800);
  22.         window.scrollTo(100,100)//都是滚到指定位置，再写滚动条也不变
  23.         window.scrollBy(200,200)//继续滚，可以做持续滚动，继续写滚动条继续向下滚动，可以做自动滚动
  24.     </script>
  25. </body>
  26. </html>

image.png

ie要定位scrollTo 可以直接设置scrollLeft scrollTop

ie不支持参数

课后作业未做 小说自动滚动