问题形容

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

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

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

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

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

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

公式提出

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

公式:

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

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

滚动间隔呈现 = .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>