Как установить скрытое переполнение на страницах параллакса React Spring

#css #reactjs #parallax #react-spring

#css #reactjs #параллакс #react-spring

Вопрос:

Я использую параллакс React Spring (https://www.react-spring.io/docs/props/parallax ) в моем проекте здесь: https://codesandbox.io/s/parallax-sticky-scroll-2zd58?file=/src/App.js

Когда вы нажимаете кнопку, чтобы перейти к следующему разделу, вы можете увидеть, что изображение перетекает в следующий раздел. но поскольку react spring устанавливает все в абсолютное положение, я не могу установить для каждого раздела значение overflow hidden.

Есть ли какой-либо способ установить скрытое переполнение, чтобы содержать мой контент в каждом разделе?

Ответ №1:

Вы можете легко добиться этого, добавив следующий css в файл styles.css

 html,
body,
#root {
  overflow: hidden;
} 

Здесь вы можете найти мою раздвоенную версию вашего примера
Ссылка на песочницу