Question

因此，此代码可以正常工作。但是，有时会出现故障。

我想要什么：

用户向下滑动，然后进入下一页。我已经为页面制作了动画。我只需要根据滑动方向添加或删除一个类，它必须应用于正确的页面（屏幕）。

这是我正在使用的js代码：

document.addEventListener('DOMContentLoaded', function() {
  window.scroll(0, 0)
  var pages = document.querySelectorAll('section.page'),
    currentPage = 0,
    totalPages = pages.length - 1,
    watchScroll = true // check scroll direction

  window.addEventListener('scroll', function() {
    if (watchScroll) {
      if (this.oldScroll < this.scrollY) {
        // currently scrolling down
        if (currentPage < totalPages) {
          handlePageDown()
        }
      } else {
        // currently scrolling up
        if (currentPage > 0) {
          handlePageUp()
        }
      }
    }
    this.oldScroll = this.scrollY
  })

  function handlePageDown() {
    pages[currentPage].classList.add('down-scroll')
    nextPage = currentPage + 1
    resetScroll(function() { // here, reset the scroll near the top so that the 
                             // user has room to scroll up or else it will go
                             // fully to the top or bottom when they scroll



      setCurrentPage(nextPage) // set the next target div
    })
  }

  function handlePageUp() { // same as down but reverse node index
    pages[currentPage - 1].classList.remove('down-scroll')
    nextPage = currentPage - 1
    resetScroll(function() {
      setCurrentPage(nextPage)
    })
  }

  function resetScroll(callback) {
    setTimeout(function() {
      watchScroll = false // don't pay attention to the scroll reset or this will trigger the eventListener
      window.scroll(0, 10) // reset scroll position to give room for up or down
      callback()
    }, 50)
  }

  function setCurrentPage(setPageAs) {
    setTimeout(function() {
      currentPage = setPageAs
      watchScroll = true
    }, 400)
  }
})

请牢记如何在不依赖setTimeout()的情况下进行此操作的想法，即刻将其立即应用于所有匹配的div。

Answer 1

虽然我没有完全认为这是问题的答案（被问到），但它似乎是解决该问题的最佳方法。

Css滚动捕捉

滚动捕捉的组合数量如此之多，以至于它们不能真正满足答案，但这是一些css示例，如果所有部分的高度均为300px，它们将非常有效。

.container {
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(300px);
  scroll-snap-type: y mandatory;
}

.child {
  scroll-snap-align: start;
}

要了解更多信息，请查看css-tricks：https://css-tricks.com/practical-css-scroll-snapping/

或者进入杂草，mdn：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap

JavaScript：整页滚动

1 个答案: