关于css:在拥有滚动条元素内滚动时判断其子元素是否出现达到可视区域公式

2次阅读

共计 3028 个字符，预计需要花费 8 分钟才能阅读完成。

网上的帖子大多数是：判断一个元素是否在可视区域中

而帖子中举的例子，也是以浏览器最外层 body/html 的滚动条为例子，进行解说，基本上都是如下的效果图：

留神这里的滚动条是最外层的

实际上，咱们页面的滚动条，有时，并不是以最外层的 body 或者 html 进行滚动的
可能是页面两头的某一个 dom 元素能够滚动
咱们须要判断这个 dom 滚动元素 内的某一个 小 dom 指标元素 何时呈现，何时达到可视区域
这里的可视区域是能看到，和最外层的那个滚动条没有关系的
如下效果图

如需要：当红色盒子在内层滚动条滚动中呈现时，就更改对应 dom 元素 背景色为粉红色

留神这里有两个滚动条，咱们的需要是 外面的滚动条滚动时，去做对应管制

其实也很简略，首先咱们剖析一些元素层级构造。
最外层的必定是 body 和html，这个不必管它
在 body 标签外部，有一个 <div class="scrollBox"></div>，这个dom 元素领有滚动条
而在 .scrollBox 的dom元素内，还有一个指标元素 <div class="target"></div>，看看这个指标元素.target 何时呈现，何时达到可视区域

公式：

滚动间隔呈现 = .target 距顶部高度 - .scrollBox 距顶部高度 - .scrollBox 本身高度

或：

边界值 = 指标元素距顶部高度 - 滚动盒子容器距顶部高度 - 滚动盒子容器本身高度

即，当滚动的间隔超过这个边界值时，指标元素就会呈现

这里的边界值，肯定是初始边界值，就是要提前算好，最好存一份，因为滚动的话，会更改相应间隔地位的

复制粘贴代码看成果更好了解：

<!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>
        .scrollBox {
            width: 100%;
            height: 300px;
            background-color: #ccc;
            /* 领有滚动条 */
            overflow-y: auto;
        }

        .target {
            width: 60px;
            height: 60px;
            background-color: red;
        }
    </style>
</head>

<body>
    <h1> 孙悟空 </h1>
    <h1> 孙悟空 </h1>
    <div class="scrollBox">
        <h1> 孙悟空 </h1>
        <h1> 孙悟空 </h1>
        <h1> 孙悟空 </h1>
        <h1> 孙悟空 </h1>
        <h1> 孙悟空 </h1>
        <h1> 孙悟空 </h1>
        <h1> 孙悟空 </h1>
        <h1> 孙悟空 </h1>
        <h1> 孙悟空 </h1>
        <h1> 孙悟空 </h1>
        <div class="target"></div>
    </div>
    <h1> 孙悟空 </h1>
    <h1> 孙悟空 </h1>
    <h1> 孙悟空 </h1>
    <h1> 孙悟空 </h1>
    <h1> 孙悟空 </h1>
    <h1> 孙悟空 </h1>
    <h1> 孙悟空 </h1>
    <h1> 孙悟空 </h1>
    <script>
        let scrollBoxDom = document.querySelector('.scrollBox')
        let targetDom = document.querySelector('.target')
        // 留神！这里的边界值，是原始的地位的值，因为滚动的话，会更改元素的 getBoundingClientRect 的相干值
        let boundaryValue = targetDom.getBoundingClientRect().top - scrollBoxDom.getBoundingClientRect().top - scrollBoxDom.offsetHeight
        // 边界值 = 指标元素间隔顶部高度 - 滚动盒子容器间隔顶部高度 - 滚动盒子容器本身的高度
        function callBack() {if (scrollBoxDom.scrollTop > boundaryValue) {console.log('在可视区域');
                scrollBoxDom.style.backgroundColor = 'pink'
            } else {console.log('不在可视区域');
                scrollBoxDom.style.backgroundColor = '#ccc'
            }
        }
        scrollBoxDom.addEventListener('scroll', callBack)
    </script>
</body>

</html>

附 - 以浏览器最外层 `body/html` 的滚动条为例子代码

<!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>
        body {background-color: #ccc;}

        .target {
            width: 60px;
            height: 60px;
            background-color: red;
        }
    </style>
</head>

<body>
    <h1> 孙悟空 </h1>
    <h1> 孙悟空 </h1>
    <h1> 孙悟空 </h1>
    <h1> 孙悟空 </h1>
    <h1> 孙悟空 </h1>
    <h1> 孙悟空 </h1>
    <h1> 孙悟空 </h1>
    <h1> 孙悟空 </h1>
    <h1> 孙悟空 </h1>
    <h1> 孙悟空 </h1>
    <h1> 孙悟空 </h1>
    <h1> 孙悟空 </h1>
    <h1> 孙悟空 </h1>
    <div class="target"></div>
    <script>
        window.onload = () => {let targetDom = document.querySelector('.target') // 指标元素 dom
            function callBack() {const top = targetDom.getBoundingClientRect().top; // 指标元素 dom 间隔顶部的高度
                if (top <= window.innerHeight) { // 当 top 小于等于文档显示区域的高时，就进入可视区域了
                    console.log('在可视区域');
                    document.body.style.background = 'pink'
                } else {console.log('不在可视区域'); // 当 top 大于文档显示区域的高时，就来到可视区域了
                    document.body.style.background = '#ccc'
                }
            }
            window.addEventListener('scroll', callBack);
        }
    </script>
</body>

</html>

正文完