如何使用 Intersection Observer API 实现页面滚动元素显示/隐藏效果？

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《如何使用 Intersection Observer API 实现页面滚动元素显示/隐藏效果？》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

理解需求：悬浮元素随页面滚动显示/隐藏

您所描述的技术是一种悬浮元素的行为，当页面内容滚动到特定位置时，该元素会显示或隐藏。您提到了头条和腾讯网站上的示例，但其实这项技术可以应用于任何网站。

实现原理：intersection observer api

为了实现这一效果，可以使用 intersection observer api。该 api 允许您监听元素是否出现在视口中，并相应地执行某些操作。

在这个具体情况下，我们想监听页面底部的元素是否出现在视口中。如果它出现在视口中，则将左侧的悬浮元素隐藏；否则就显示。

步骤：

1. 获取元素引用：

   • 获取页面底部元素的引用，如 const endel = document.queryselector('.end');
   • 获取左侧悬浮元素的引用，如 const leftel = document.queryselector('.left');

2. 创建 intersection observer 实例：

   • 创建一个 intersection observer 实例，并定义一个回调函数，该回调函数将在被监听元素进入或离开视口时调用。
   • 在回调函数中，根据被监听元素是否出现在视口中，设置左侧悬浮元素的 display 属性为 none 或空字符串。

3. 观测页面底部元素：

   • 使用 observe() 方法将 intersection observer 实例附加到页面底部元素。

代码示例：

const endEl = document.querySelector('.end');
const leftEl = document.querySelector('.left');

const obs = new IntersectionObserver((entries, observer) => {
  if (entries[0].isIntersecting) {
    leftEl.style.display = 'none';
  } else {
    leftEl.style.display = '';
  }
}, {
  rootMargin: '0px',
  threshold: 0.1,
});

obs.observe(endEl);

通过使用 intersection observer api，您可以实现无需知道元素高度的悬浮元素显示/隐藏效果，从而让您的网站具有更具交互性和视觉吸引力的用户体验。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《如何使用 Intersection Observer API 实现页面滚动元素显示/隐藏效果？》文章吧，也可关注golang学习网公众号了解相关技术文章。