如何在 ReactJS 中滚动时将 div 从屏幕的左侧移动到右侧？答案

【问题标题】：How to move div from left to right hand side of the screen on scroll in ReactJS?如何在 ReactJS 中滚动时将 div 从屏幕的左侧移动到右侧？
【发布时间】：2021-10-11 19:43:26
【问题描述】：

当用户向下滚动时，我正在尝试将 div 从左向右缓慢移动。它应该留在它的部分内，并且在您向上滚动时不必移回左侧。

我想知道如何在不使用任何外部包的情况下做到这一点。到目前为止，这是我所拥有的，但圆圈最终会滚动到页面外，一旦它到达那里，我需要它保持在右侧。

<div className="App">
      <div className="sectionOne">
        <div className="circle styles" style={{ position: 'absolute', left: `${position}rem` }}></div>
      </div>
      <div className="sectionTwo"></div>
    </div>

const [position, setPosition] = useState('70')

function moveCircle() {
    const speed = 5
    const scrolltop = window.pageYOffset
    const scrollAndSpeed = scrolltop / speed

    console.log(scrollAndSpeed.toString())
    setPosition(scrollAndSpeed.toString())
  }

  useEffect(() => {
    window.addEventListener(
      'scroll',
      function () {
        requestAnimationFrame(moveCircle)
      },
      false
    )
  }, [])

【问题讨论】：

您可以使用Math.min( scrollAndSpeed, pageWidth)，但您需要自己计算页面宽度
@GabrielePetrioli 如何使用它来阻止它向右移动？我已经使用 window.innerwidth 计算了页面宽度
因为如果scrollAndSpeed 超过pageWidth，它将使用pageWidth 而不是scrollAndSpeed。因此，您正在为您的position 设置一个可以达到的最大值。它不能超过那个。

标签： javascript html css reactjs

【解决方案1】：

我刚刚注意到您使用rem 进行定位。

所以Math.min 不适用于这种情况。您可以使用 css clamp 函数。

style={{ position: 'absolute', left: `clamp(0vw, ${position}rem, 100vw - 1rem)` }}

注意我放在那里的1rem，应该是.circle元素的宽度。

【讨论】：