JS学习之BOM | client | scroll

最新推荐文章于 2024-08-06 12:58:11 发布

Root_src

最新推荐文章于 2024-08-06 12:58:11 发布

阅读量121

点赞数

分类专栏： JavaScript 文章标签： javascript 前端学习

本文链接：https://blog.csdn.net/weixin_53317758/article/details/125074585

版权

JavaScript 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

本文探讨JavaScript中的BOM（浏览器对象模型），重点关注client和scroll属性的应用。通过clientWidth和clientHeight了解元素可视区信息，分析淘宝flexible.js源码。同时，讲解scroll系列属性在获取元素滚动距离中的作用，结合实例解释如何仿制淘宝右侧固定侧边栏。最后，文章总结offset、client和scroll三大系列，并比较mouseenter和mouseover事件的区别。

摘要由CSDN通过智能技术生成

元素可视区Client系列

client就是客户端，使用client系列的相关属性来获取元素可视区的相关信息，通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding内容区的宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

重点记忆：clientWidth 、clientHeight

案例：淘宝flexible.js源码分析

立即执行函数(function() {}) () 字面意思理解：不用调用函数可以直接使用函数，里面所有的变量都是局部变量

注意作用：创建一个独立的作用域，避免了命名冲突问题

下面三种情况都会刷新页面都会触发load事件

a标签的超链接
1. F5或者刷新按钮（强制刷新）
2. 前进后退按钮
3. 前进后退按钮
  
  但是火狐中，有个特点，有个‘往返缓存’ 这个缓存中保存着页面数据，还保存了DOM和JS的状态，实际上是将整个页面都保存在了内存里
所以此时后退按钮不能刷新页面

此时可以使用pageshow事件来触发，这个事件在页面显示时触发，无论页面是否来自缓存，在重新加载页面中，pageshow会在load事件触发后触发，根据事件对象的persisted来判断是否缓存中的页面触发的pageshow事件，注意这个事件给window添加

flexi.js分析

(function flexible(window, document) {
    // 获取的html 的根元素
    var docEl = document.documentElement
        // dpr 物理像素比
    var dpr = window.devicePixelRatio || 1

    // adjust body font size  设置我们body 的字体大小
    function setBodyFontSize() {
        // 如果页面中有body 这个元素 就设置body的字体大小
        if (document.body) {
            document.body.style.fontSize = (12 * dpr) + 'px'
        } else {
            // 如果页面中没有body 这个元素，则等着 我们页面主要的DOM元素加载完毕再去设置body
            // 的字体大小
            document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10    设置我们html 元素的文字大小  将屏幕划分为10等份
    function setRemUnit() {
        var rem = docEl.clientWidth / 10
        docEl.style.fontSize = rem + 'px'
    }

    setRemUnit()

    // reset rem unit on page resize  当我们页面尺寸大小发生变化的时候，要重新设置下rem 的大小
    window.addEventListener('resize', setRemUnit)
        // pageshow 是我们重新加载页面触发的事件 照顾了大部分的页面 后退前进也能重新加载页面
    window.addEventListener('pageshow', function(e) {
        // e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面，也需要从新计算一下rem 的大小
        if (e.persisted) {
            setRemUnit()
        }
    })

    // detect 0.5px supports  有些移动端的浏览器不支持0.5像素的写法
    if (dpr >= 2) {
        var fakeBody = document.createElement('body')
        var testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1) {
            docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
    }
}(window, document))

元素滚动scroll 系列

scroll就是滚动的意思，使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight	返回自身实际的高度，不含边框，返回数值不带单位

实际开发中使用最多的是scrollTop scrollLeft 被卷去的距离就是scrollTop值

案例：仿淘宝固定右侧侧边栏

原先侧边栏是绝对定位
当页面滚动到一定位置，侧边栏改为固定定位
页面继续滚动，会让返回顶部显示出来

分析：

需要用到页面滚动事件scroll因为页面滚动，所以事件源是document
滚动到某个位置，就是判断页面被卷上去的值
页面被卷去的头部，可以通过window.pageOffset 获得 如果被卷上去的左侧window.pageXOffset
注意，元素被卷曲的头部是element.scrollTop 如果是页面被卷曲的头部则是window.pageYOfsset

需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

声明了DTM 使用document.documentElement.scrollTop
未声明DTD 使用document.body.scrollTop
新方法window.pageYoffset 和window.pageXOffset, IE9开始支持

function getScroll () {

return {

left:window.pageXOffset || docuementElement.scrollLeft || document.bodyScrollLeft ||0

left:window.pageYOffset || docuementElement.scrollTop || document.bodyScrollTop ||0

}

}
使用的时候 getScroll().left

三大系列总结

三大系列大小对比	作用
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位

他们主要用法：