Javascript 向下滚动到一个部分

Question

我正在制作我的投资组合网站。我想在用户滚动到指定部分时添加一个 css 类。(我想使用 Javascript 事件)

例如，首先使用 css 隐藏一个元素，然后当用户向下滚动到该部分时，使用 vanilla Javascript 显示该元素。

<div id="info"> info... </div> 
#info { display :none;}

正在加载 Javascript 代码😬...

Answer 1

好的，这是个大问题，您可以使用 Intersection Observer但并非所有浏览器都支持，另一种方法是在窗口上使用滚动事件。

function debounce(func, wait = 20, immediate = true) {
    let timeout
    return function() {
      let context = this,
        args = arguments
      let later = function() {
        timeout = null
        if (!immediate) func.apply(context, args)
      }
      let callNow = immediate && !timeout
      clearTimeout(timeout)
      timeout = setTimeout(later, wait)
      if (callNow) func.apply(context, args)
    }
  }

  const images = document.querySelectorAll('img')

  function checkSlide(e) {
    images.forEach(img => {
      const slideInAt = window.scrollY + window.innerHeight - img.height / 2
      const imageBottom = img.offsetTop + img.height
      const isHalfShown = slideInAt > img.offsetTop
      const isNotScrolledPast = window.scrollY < imageBottom
      if (isHalfShown && isNotScrolledPast) {
        img.classList.add('active')
      } else {
        img.classList.remove('active')
      }
    })
  }

  window.addEventListener('scroll', debounce(checkSlide))

这是我按照 Wes Bos 编写的代码' javascript30 类(class)，我强烈推荐，它是免费的

总结:

函数 debounce 是为了停止调用事件太多次，超出需要。

const 图像是我 dom 上的所有图像，我正在检查图像，但你可以检查任何你想检查的 div。

checkSlide 函数检查我是否已到达但未通过每个图像，您可以在此处检查所需的每个 div。