IntersectionObserver实现页面滚动时候监听指定元素进入，滚动出页面可视区域事件

主要使用到的api：

IntersectionObserver 想要详细了解这个api用法自行百度

示例

var io = new IntersectionObserver(callback, option)

// 开始观察
io.observe(document.getElementById('example'))

// 停止观察
io.unobserve(element)

// 关闭观察器
io.disconnect()

如果想要监听多个元素

io.observe(elementA)
io.observe(elementB)

实现代码

1. 需要设置监听元素的id 如下的 id=“comment”

html

<div id="comment"></div>

js

const rollDom = document.getElementById('comment')
let observer = new IntersectionObserver(
   function (entries) {
     entries.forEach(function (element, index) {
       if (!element.isIntersecting) {
         // 不在可视区域，我这里因为业务需要，使用scrollIntoView实现了自动使rollDom元素滚动到可视区域底部
         // block的值：start、center、end、nearest
         rollDom.scrollIntoView({ block: 'end', behavior: 'smooth' })
       } else {
		  // 进入可视区域 dosomething
	   }
     })
   },
   {
     root: null,
     threshold: [0, 1]
   }
 )
 observer.observe(rollDom)

主要借鉴了前端大全的这篇文章中的：IntersectionObserver 部分