深刻理解（浏览器对象模型）BOM中的属性

原创已于 2023-05-12 15:14:11 修改 · 180 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #windows

于 2023-05-12 09:57:22 首次发布

(浏览器对象模型）BOM 专栏收录该内容

2 篇文章

订阅专栏

文章介绍了JavaScript中的window.innerHeight和CSS的100vh如何表示浏览器视口高度，以及window.outerHeight包含的完整窗口尺寸。同时，讨论了window.scrollY和pageYOffset在处理滚动事件中的作用，特别是在单页面应用中监听滚动到底部时的性能考虑和清理监听事件的方法。

window.innerHeight：浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。

在css 中我们一直使用100vh 去表示浏览器视口的高度，他和js 中的window.innerHeight 是相等的

window.outerHeight: 获取整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）、窗口镶边（window chrome）和窗口调正边框（window resizing borders/handles）。

在这里插入图片描述

window.scrollY：滚动条滚动的距离，也指内容滚出屏幕的垂直距离。

该pageYOffset属性是该scrollY属性的别名：为了浏览器兼容问题，最好使用pageYOffset代替scrollY

// 页面监听滚动条触底

// 1 单页面应用，当切换路由，当前组件被销毁，但是滚动事件是添加在window 上的，并不会被销毁,所以依然在监听滚动，浪费性能，

// 2 当操作当前组件的dom 的时候会报错，因为当前组件已经被销毁了;所以离开页面是要取消监听事件。window.removeEventListener('scroll')

mounted(){
    // 页面监听滚动条触底
    window.addEventListener('scroll', () =>{
        // console.log(window.scrollY);
        // console.log(document.body.scrollHeight);
        // 为了浏览器兼容问题，最好使用pageYOffset代替scrollY
        if (window.innerHeight  +  window.scrollY  ===  document.body.scrollHeight) {
            console.log("到达底部的处理逻辑");
            // 到达底部的处理逻辑
            this.pageNum++
            this.initData()
        }
    });
},

beforeDestroy(){
     window.removeEventListener('scroll')
},