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

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

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

现在在向上滚动功能中：

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

现在可以使用向下滚动功能：

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?

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

2 个答案: