IntersectionObserver

IntersectionObserver支援度:Can I Use)

因為前幾天講到slider，想要紀錄一下前陣子在工作上同事分享的好招。
以往做slider會有左右箭頭，如果要達到比較好的使用者體驗，需要知道slider是不是已經到底來判斷是否要顯示箭頭。
IntersectionObserver是一個API用來判斷物體是否在可視範圍內，而我們要利用這個API來判斷是否要顯示箭頭，
例如:左方的箭頭顯示邏輯就是當第一張slide出現在可視範圍就不顯示，右方箭頭亦然。

以下是範例片段:

const observeElementInContainer = (element, container, callback)=> {
      const observer = new IntersectionObserver((entries) => {
        const entry = entries[0];
        if (entry.isIntersecting) {
          callback(true);
        }else{
          callback(false);
        }
      });
      observer.observe(element, { root: container });
    }
    onMounted(() => {
        observeElementInContainer(targetLeft.value, slideContainer.value, (isInContainer) => {
          isLeftArrShow.value=!isInContainer
        });
        observeElementInContainer(targetRight.value, slideContainer.value, (isInContainer) => {
          isRightArrShow.value=!isInContainer
        });
    })

codepen範例

IT15-Day23-Intersection Observer API in Slider

參考來源

• https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver
• https://jim1105.coderbridge.io/2022/07/30/intersection-observer/