前端监听dom元素在浏览器改变时的自适应问题

问题描述

在写vue的过程中,我们有一个固定的表头,在浏览器上面,大小为20px,然后下面是一个div,高度总是铺满屏幕的,显然设置为高度100%是不可取的;会有一个20px的下移。

前端监听dom元素在浏览器改变时的自适应问题_第1张图片

解决办法

1 显然用setInterval去实时的获取dom元素的高度是可行的,但是在体验上是不好的。

2 在浏览器大小变化时,获取dom元素;这时通过$(selector).width这种方法,或者原生的方法去获取,总是获取的变化前的宽高,也是行不通的。不过这个时候可以这样去获取dom变化后的宽高:

  $(window).resize(function () {
     
        const width = getStyle($("#dv")[0], 'width');
        const height = getStyle($("#dv")[0], 'height');
    })

    function getStyle(ele, attr) {
     
        if (window.getComputedStyle) {
     
            return window.getComputedStyle(ele, null)[attr];
        }
        return ele.currentStyle[attr];
    }

3 有时候dom元素不是通过浏览器宽高而改变的,这时我们可以这样去解决:

var observer = new ResizeObserver(function(entries){
     
        console.log(entries)
    })
    observer.observe($("#dv")[0])

前端监听dom元素在浏览器改变时的自适应问题_第2张图片综上所述,在监控dom元素时,第三种方案最好,但是对于一些低版本的浏览器存在着兼容问题。
这里还有一点需要注意,就是使用 ( w i n d o w ) . r e s i z e ( ) 的 时 候 , 有 时 候 , 我 们 渲 染 了 v u e , 在 m o u n t e d 里 使 用 了 这 个 , 当 组 件 销 毁 时 , 没 有 关 闭 的 话 , 会 持 续 调 用 , 从 而 报 错 , 所 以 我 们 记 得 在 d e s t r o y e d 里 面 (window).resize()的时候,有时候,我们渲染了vue,在mounted里使用了这个,当组件销毁时,没有关闭的话,会持续调用,从而报错,所以我们记得在destroyed里面 (window).resize()vuemounted使destroyed(window).off(“resize”)

你可能感兴趣的:(前端)