打算使用IntersectionObserver监听内容滚动到底部/顶部,
监听的root是.scroll,
监听的target是.flag-body--topor.flag-body--bottom,
监听是符合预期的,
但是发现滚动到底部的时候,.flag-body--bottom竟然可见并且再底部占了一块滚动距离!
(按理说position: absolute应该是不占位置的,也不应该占用滚动距离)
如果希望.flag-body--bottom不占滚动距离应该怎么处理?
元素 .flag 的去掉相对定位的属性就行了。但这样他会影响到更外部的滚动容器，也就是浏览器窗口（因为 overflow 的默认值是 visible）。
所以需要给元素 .flag 设置 overflow:hidden 这样的样式，使溢出的内容隐藏就可以解决你说的这个问题。
对于这种绝对定位元素溢出导致影响滚动容器的现象，可以看MDN上面关于这部分的解释是:
- CSS 尽力减少“数据损失”
- 控制溢出行为的属性是初始值为
visible的overflow属性。这就是为什么我们可以看到溢出内容。
所以在元素 .flag 有相对定位时，flag-body--bottom 元素就会相对于 .flag 元素做偏移。那么因为 .flag 元素的 overflow 是默认值 visible 所以内容在溢出同时也会显示，导致影响到 .flag 的外部滚动容器 .scroll 元素。
如果元素 .flag 设置了 overflow:hidden 那么溢出的内容（flag-body--bottom 元素）就会被隐藏掉，自然就不会影响到外部容器 .scroll 元素了。
