BOM、location对象、history历史记录、scroll 浏览器滚动

最新推荐文章于 2022-11-30 10:20:40 发布

Mr._Dang

最新推荐文章于 2022-11-30 10:20:40 发布

阅读量410

点赞数

分类专栏： JavaScript基础文章标签： javascript js

本文链接：https://blog.csdn.net/m0_55832273/article/details/119742013

版权

JavaScript基础专栏收录该内容

30 篇文章 2 订阅

订阅专栏

一、location对象

location对象里的方法

1.location.reload

作用：重新刷新加载页面，相当于按下了浏览器左上角的刷新按钮
注意：页面刷新语句不要写在一打开页面就可以执行的地方，否则一进来就刷新会造成死循环,页面刷新多和按钮配合使用

2.location.assign(‘新的地址’)

作用：重定向页面，和href一样，可以实现页面的跳转

3.location.replace(‘新的地址’)

作用：替换当前的页面因为不记录历史记录，所以不能回退

二、window对象

1.window.navigator对象

作用： window.navigator对象就是用来记录浏览器的版本信息（常用属性）

2.window.navigator.userAgent

作用：返回用户当前使用的浏览器版本及型号信息

3.window.navigator.appName

返回值：Netscape 网景

【注意】所有的浏览器返回值都是统一的名字，向网景致敬（ie低版本除外）

4.window.navigator.platform

作用：返回浏览器所在的操作信息

三、history历史记录

window下有一个history对象，里面包含了一些操作历史的记录属性和方法
作用：可以操作浏览器的前进和后退
history包含用户的访问过的url

1.window.history.back()

作用：回退到上一条历史记录，相当于点击浏览器左上角的后退按钮
前提条件：要有上一条历史记录

2.window.history.forward()

作用：前进到到下一条历史记录，相当于点击浏览器左上角的前进按钮
前提条件：需要回退以后才能前进

3.window.history.go(参数)

根据参数来判断是前进还是后退

参数数为正值时是前进
参数数为负值时是后退
参数为0 刷新

例：

    <button id="back">back</button>
    <button id='forward'>forward</button>
    <button id='refresh'>刷新</button>
    <script>
        back.onclick = function () {
            //后退
            // window.history.back()
            window.history.go(-1)
        }

        forward.onclick = function () {
            //前进
            // window.history.forward()
            window.history.go(1)
        }

        refresh.onclick = function () {
            window.history.go(0)
        }

        console.log(window.history);

四、scroll 浏览器滚动

1.window.onscroll

浏览器滚动事件，当页面发生滚动的时候触发，不论是上下滚动还是水平方向上的滚动
scroll系列可以动态的获取到元素的大小，滚动距离
语法：元素.scrollTop

返回元素被卷上去上侧的距离，返回值不带单位
可读写的属性：写入的时候可以使页面瞬间滚动到指定的位置

2.document.documentElement.scrollTop

使用时必须要有DOCTYPE，如果没有获得滚动高度一直是0
作用：返回页面被卷上去的头部的距离

3.document.documentElement.scrollLeft

使用时必须要有DOCTYPE，如果没有获得滚动宽度一直是0
作用：返回页面被卷进去的左侧的距离

4.document.body.scrollTop

5.document.body.scrollLeft

返回页面被卷进去的高度和宽度
使用时必须没有DOCTYPE，如果有获得滚动宽度一直是0

6.window.pageYOffset 垂直方向

7.window.pageXOffset 水平方向

【注意】新增的 ie9以上版本才支持

【兼容写法】

必须没有DOCTYPE
使用短路来处理兼容性问题的一个前提条件就是不能报错
使用逻辑运算符来处理兼容性问题，当前面的值为0 的时候，会执行后面的，前面的值不为0时，则直接使用前面的返回值

document.body.scrollTop||document.documentElement.scrollTop||window.pageYOffset
document.body.scrollLeft||document.documentElement.scrollLeft||window.pageXOffset

8.设置浏览器滚动到指定的位置

window.scrollTo(横向坐标,纵向坐标)

注意：参数值不带单位，参数必须是两个参数，否则就会报错(瞬间定位)

window.scrollTo({top:0,left:0,behavior:“smooth”})

如果参数是一个对象，对象里的属性写几个都可以
特点：可以设置第三个配置项来决定页面滚动是瞬间定位还是平滑移动
behavior 翻译：行为
behavior：instant 立即
behavior：smooth

【注意】如果设置了平滑滚动，页面不轮滚动的距离是多少，所花费的时候基本上是一样，这样就说明了, 不同的滚动距离的滚动速度是不一样的。
若果我们想要页面滚动距离大时花费时间久，距离小话费时间短，也就是说想要滚动的速度是一样的，就自己写方法实现了，原生的api达不到这样的效果。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box{
      width: 100%;
      height: 5200px;
      background: cornflowerblue;
    }
    #btn{
      position: fixed;
      bottom: 30px;
      right: 30px;
    }
  </style>
</head>
<body>
  <div id="box">内容</div>
  <button id="btn">点击回到顶部</button>
  <script>
    var timer;
    btn.onclick = function(){
      // 设置定时器，每间隔一定时间就会改变滚动条的位置，来实现页面的滚动
      timer = setInterval(function(){
        // 每20ms就让页面卷去距离减少60
        document.documentElement.scrollTop -= 60;
        // 当被卷曲的高度小于等于0时，清除定时器
        if(document.documentElement.scrollTop <= 0){
          clearInterval(timer)
        }
        console.log(document.documentElement.scrollTop);
      },20)
    }

    // 中途停止滚动效果
    // 使用一个变量来记录页面滚动的距离
    var topNum = 0;
    // 给window绑定一个滚动事件
    window.onscroll = function(){
      if(document.documentElement.scrollTop > topNum){
        // 在给变量赋值前，先判断滚动的高度，如果变大则说明用户想反方向滚动
        // 清除定时器
        clearInterval(timer)
      }
      // 获取每一次触发浏览器滚动事件时，得到的滚动高度，赋值变量
      topNum = document.documentElement.scrollTop
    }
  </script>
</body>
</html>

Mr._Dang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM、location对象、history历史记录、scroll 浏览器滚动

BOM一、location对象location对象里的方法1.location.reload2.location.assign('新的地址')3.location.replace('新的地址')二、window对象1.window.navigator对象2.window.navigator.userAgent3.window.navigator.appName4.window.navigator.platform三、history历史记录1.window.history.back()2.window.his
复制链接

扫一扫