Блог

Главная - Вопросы по программированию - Как переместить div из левой в правую часть экрана при прокрутке в ReactJS?

Как переместить div из левой в правую часть экрана при прокрутке в ReactJS?

javascript #html #css #reactjs

#javascript #HTML #css #reactjs

Вопрос:

Я пытаюсь медленно перемещать 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
    )
  }, [])

Комментарии:

1. Вы могли бы использовать Math.min( scrollAndSpeed, pageWidth) , но вам нужно самостоятельно рассчитать ширину страницы

2. @GabrielePetrioli Как бы с помощью этого остановить его от перехода вправо? Я рассчитал ширину страницы с помощью window.innerwidth

3. потому что, если scrollAndSpeed превышает pageWidth , он будет использовать pageWidth вместо scrollAndSpeed . Итак, вы устанавливаете максимальное значение, которое может быть достигнуто для вашего position . Он не может пройти через это.

Ответ №1:

Я только что заметил, что вы используете rem для позиционирования.

Так Math.min что это не сработает для этого сценария. Вы можете использовать функцию css clamp .

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

Обратите внимание, что 1rem я вставил туда, должна быть ширина .circle элемента.

Метки: