CODEWITHSUNDEEP
cssreactjsswiper.jsfullpage.js
eto3542
eto3542

Reputation: 91

How to scroll inside slides of a full-page website in react?

I am building a website with react/typescript. I want to use a fullpage-layout where you can scroll through different vertical slides, basically like here: https://alvarotrigo.com/fullPage/#page1

However, if the content of a slide is more than 100vh, it should first enable normal scrolling until the bottom of the current slide is reached and then swap to the next one. So I want to have the nice, snappy feel of full-page slides, but also the flexibility to make my slides longer if the content can't be logically distributed onto multiple slides. Also, I don't want to have scrollable containers in a slide, I want the whole slide to be scrollable.

I've tried implementing this with swiperjs, css scroll snap and manually via the intersection observer API but was never really satisfied with the result. One problem is, that the large slides (those that are higher than 100vh) also feature expandable elements like accordions or other form elements. So sometimes it can be, that a slide is not scrollable at first, but after user interaction becomes scrollable.

I am sure that this is not an uncommon problem and would like to know if anyone here solved this in a satisfying way.

Upvotes: 0

Views: 747

Answers (2)

Kuza Grave
Kuza Grave

Reputation: 1574

This can be done using css snap properties and some js observers.

To provide a simpler solution you can use react-mega-scroll to create a full page scroller:
https://github.com/NxRoot/react-mega-scroll

Upvotes: 0

Alvaro
Alvaro

Reputation: 41605

So what's the problem with fullPage.js?

You can see this example does exactly what you need.

It uses the default option scrollOverflow: true, which is the option you need to achieve the scroll within sections and slides.

Make sure you are importing the CSS and JS files correctly and that you are using the latest fullpage.js version.

In case of using React, make sure to use the official component for React.

Upvotes: 0

Related Questions