New intersectionobserver usage notes

MDN API

Document links

With the development of web pages , To detect a （ some ） There are more and more requirements related to whether elements appear in the visual window ？ such as ：

When the page scrolls , Lazy loading pictures or other content .
Realization “ Unlimited scrolling ” Website , That is, when users scroll the web page, they directly load more content , No need to turn the page .
Some elements are exposed by buried point
Scroll to the corresponding area to perform the corresponding animation or other tasks .

all the time , It is not easy to detect the visual state of an element or the relative visual state of two elements , Most solutions are not entirely reliable , The implementation method is ugly , It is also very easy to slow down the performance of the entire website .
IntersectionObserver That's why it happened

demand : Some elements are exposed by buried point

reportDatail() Method Listen to the contents of the container
If dom Initialization exists It's in mounted() Just listen ;
If dom It's a component It's based on Requested returned data Then render the component dom Then this method is used after the request returns

	asiosDemo(){
    
		... request 
		if(success) {
    
			this.list = data // Returned data   then list  Render components 
			this.$nextTick(() => {
    
	           this.reportDatail()
	         })
		}
	}

methods:{
    
	reportContent(index, name) {
    
		console.log(' Exposure content request ', index, name)
	},
	//  Yes dom  monitor 
	reportDatail() {
    
		//  Containers dom
        const dom = document.querySelector('.monitor-list')
        setTimeout((_) => {
    
          this.$_reportContent(
            {
    
              observeNodes: dom,
              childNodes: dom.querySelectorAll('.content-task-item') //  Listen for child elements dom
            },
            //  Callback function   Bury the returned data 
            this.reportContent
          )
        }, 0)
     },
	$_reportContent(options, callBackFn) {
    
		// observeNodes  Container elements dom
		// childNodes  Monitored exposure sub elements dom
        const {
     observeNodes, childNodes } = options
        const io = new IntersectionObserver(
          function(entrier) {
    
            entrier.forEach((el, i) => {
    
              if (el.isIntersecting) {
    
              	// _index _name  It's a child element dom  Created value 
                let _index = el.target.getAttribute('data-index')
                let _name = el.target.getAttribute('data-name')
                callBackFn(_index, _name)
                //  Unbind the monitored elements  
                io.unobserve(el.target)
              }
            })
          },
          {
    
            root: observeNodes,
            rootMargin: '0px'
          }
        )
        if (childNodes && childNodes.length !== 0) {
    
          childNodes.forEach((el) => {
    
            let _index = el.getAttribute('data-index') * 1
            // this.exposureList Record the latest exposure   The previously exposed ones are no longer monitored 
            if (this.exposureList.includes(_index)) {
    
              io.observe(el)
            }
          })
        }
      },
}