问题描述
网上的帖子大多数是：判断一个元素是否在可视区域中
而帖子中举的例子，也是以浏览器最外层body/html的滚动条为例子，进行讲解，基本上都是如下的效果图：
注意这里的滚动条是最外层的
- 实际上，我们页面的滚动条，有时，并不是以最外层的
body或者html进行滚动的 - 可能是页面中间的某一个
dom元素可以滚动 - 我们需要判断这个
dom滚动元素内的某一个小dom目标元素何时出现，何时达到可视区域 - 这里的可视区域是能看到，和最外层的那个滚动条没有关系的
- 如下效果图
如需求：当红色盒子在内层滚动条滚动中出现时，就更改对应dom元素背景色为粉红色
注意这里有两个滚动条，我们的需求是
里面的滚动条滚动时，去做对应控制
公式提出
- 其实也很简单，首先我们分析一些元素层级结构。
- 最外层的肯定是
body和html，这个不用管它 - 在
body标签内部，有一个dom元素拥有滚动条 - 而在
.scrollBox的dom元素内，还有一个目标元素.target何时出现，何时达到可视区域
公式：
滚动距离出现 = .target距顶部高度 - .scrollBox距顶部高度 - .scrollBox自身高度
滚动距离出现 = .target距顶部高度 - .scrollBox距顶部高度 - .scrollBox自身高度
滚动距离出现 = .target距顶部高度 - .scrollBox距顶部高度 - .scrollBox自身高度
或：
边界值 = 目标元素距顶部高度 - 滚动盒子容器距顶部高度 - 滚动盒子容器自身高度
边界值 = 目标元素距顶部高度 - 滚动盒子容器距顶部高度 - 滚动盒子容器自身高度
边界值 = 目标元素距顶部高度 - 滚动盒子容器距顶部高度 - 滚动盒子容器自身高度
即，当滚动的距离超过这个边界值时，目标元素就会出现
这里的边界值，一定是初始边界值，就是要提前算好，最好存一份，因为滚动的话，会更改相应距离位置的
复制粘贴代码看效果更好理解：
Document
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
附-以浏览器最外层body/html的滚动条为例子代码
Document
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
