Javascript/React onClick 向下/向上滚动设置量

Question

我在弄清楚如何使按钮 onClick 向下滚动（例如每次点击 30 像素）时遇到问题。

假设我有两个带有这样图标的 div

<div className="info-container">
    <div className="scroll-icon-container" onClick={scrollUp(30)}>
        <ScrollUpIcon />
    </div>
    <div className="scroll-icon-container" onClick={scrollDown(30)}>
        <ScrollDownIcon />
    </div>
    <p>"Huge amount of text that will need scrolling"</p>
</div>

然后是两个函数

scrollUp(number: amountToScroll){
   //Scroll the "info-container" up amountToScroll pixels
}

scrollDown(number: amountToScroll){
   //Scroll the "info-container" down amountToScroll pixels
}

到目前为止，我只能在 jquery 中找到或者如何使其滚动到特定元素，但我正在寻找一个以像素% 为单位向下滚动的设定量或任何有效的方法。

Answer 1

首先，您可以定义一个变量或状态来保持滚动位置。

让我们将 state 设为 scrollPosition 并将其初始化为 0。

现在在scrollUp函数中：

scrollUp(amountToScroll){
    this.setState({
        scrollPosition : this.state.scrollPosition + amountToScroll
    })
    window.scrollTo(0, this.state.scrollPosition)
}

现在在 scrollDown 功能中：

scrollDown(amountToScroll){
    this.setState({
        scrollPosition : this.state.scrollPosition - amountToScroll
    })
    window.scrollTo(0, this.state.scrollPosition)
}

Answer 2

使用window.scrollBy( pixelsToScrollRight, pixelsToScrollDown ) 方法。

因此，您可以使用以下方法来代替 scrollUp() 和 scrollDown() 方法：

scroll(number: amountToScroll){
  //amount to scroll is negative to scroll up
  window.scrollBy(0 , amountToScroll)
}

如果您想查看 div 内的滚动：How to scroll to an element inside a div?