在拥有滚动条元素内滚动时，判断其子元素是否出现（达到可视区域）公式

问题描述

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

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

注意这里的滚动条是最外层的

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

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

注意这里有两个滚动条，我们的需求是里面的滚动条滚动时，去做对应控制

公式提出

• 其实也很简单，首先我们分析一些元素层级结构。
• 最外层的肯定是body和html，这个不用管它
• 在body标签内部，有一个
  ，这个dom元素拥有滚动条
• 而在.scrollBox的dom元素内，还有一个目标元素
  ，看看这个目标元素.target何时出现，何时达到可视区域

公式：

滚动距离出现 = .target距顶部高度 - .scrollBox距顶部高度 - .scrollBox自身高度

滚动距离出现 = .target距顶部高度 - .scrollBox距顶部高度 - .scrollBox自身高度

滚动距离出现 = .target距顶部高度 - .scrollBox距顶部高度 - .scrollBox自身高度

或：

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

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

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

即，当滚动的距离超过这个边界值时，目标元素就会出现

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

复制粘贴代码看效果更好理解：

    
    
    
    
    



    
孙悟空
    
孙悟空
    

        
孙悟空
        
孙悟空
        
孙悟空
        
孙悟空
        
孙悟空
        
孙悟空
        
孙悟空
        
孙悟空
        
孙悟空
        
孙悟空
        

    
    
孙悟空
    
孙悟空
    
孙悟空
    
孙悟空
    
孙悟空
    
孙悟空
    
孙悟空
    
孙悟空
    

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

    
    
    
    
    



    
孙悟空
    
孙悟空
    
孙悟空
    
孙悟空
    
孙悟空
    
孙悟空
    
孙悟空
    
孙悟空
    
孙悟空
    
孙悟空
    
孙悟空
    
孙悟空
    
孙悟空