五、Javascript 空间坐标[尺寸、滑动]

一、尺寸

1.视窗尺寸

• document.documentElement.clientWidth：视窗宽度
• document.documentElement.clientHeight：视窗高度

2.各种尺寸

举例：

前提：var a = document.getElementById('gao')

二、滑动

1.连续滑动

解释：配合setInterval使用，能够每次向下滑行一点，一直滑动

格式：element.scrollBy()//其会在每次的基础上再向下滑动一次，其相当于“相对定位”

参数：behavior:smooth 为平滑滚动

<style>
  body {
    height: 1500px;
  }
</style>
<script>
setInterval(() => {
    document.documentElement.scrollBy({ top: 10, behavior: 'smooth' })//还可以设置left值
  }, 100)
</script>
1
2
3
4
5
6
7
8
9
10

2.一次滑动

解释：一次性滑动目标位置
格式：element.scrollTo()//其一次滑倒设定的值的位置，其相当于“绝对定位”
参数：behavior:smooth 为平滑滚动

<style>
  body {
    height: 1500px;
  }
</style>
<script>
  setTimeout(() => {
    document.documentElement.scroll({ top: 200, behavior: 'smooth' })//还可以设置left值
  }, 1500)
</script>
1
2
3
4
5
6
7
8
9
10

3.顶部或底部滑动

解释：element.scrollIntoView()//其只能设置block值，end表示结尾，start表示开始

参数：behavior:smooth 为平滑滚动

<style>
    body {
      height: 1500px;
    }
  </style>
<style>
    body {
      height: 1500px;
    }
  </style>
  <button onclick="a()">000</button>
  <script>
    function a(){
        document.documentElement.scrollIntoView({ block: 'end', behavior: 'smooth' })
    }
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16