search

cmswalker / fullpage-react

Stateful fullpage.js inspired scrolling for React
https://cmswalker.github.io/fullpage-react/
206 stars 42 forks source link

how to enable scrolling when the slide is taller than the screen? #83

Closed makc closed 6 years ago

makc commented 6 years ago

I'm trying to figure out the best way to do this. Currently it seems to always scroll all the way to the next slide, I'd like it to let it scroll freely until the bottom of the slide reaches the bottom of the screen, and only then go to next slide.

dimisus commented 6 years ago

I am trying to figure out the same...

cmswalker commented 6 years ago

@makc @dimisus why/when exactly would you have a scenario where the slide is taller than the viewport? The point of this lib + fullpage.js is so that the slide is always the size of the viewport.

dimisus commented 6 years ago

Well, I am somehow sure it cannot work with the fullpage approach, but the idea I am currently working on is that you basically have single slides and thus a fullpage scrolling. There are two reasons I would need a scroll first before the fullpage switches to the next.

  1. I might have more content (like a blog entry) or similar which cannot fit one single page. In order to have a similar styling I need the user to scroll within the slide before changing to the next slide.

  2. I am using a grid and when I scale my viewport the elements might switch to a vertical order and therefore the slide will be bigger/higher than the initial viewport. I would need the customer to scroll through the content before sliding to the next slide.

Those are my two use cases, but I am not very optimistic a fullpage approach can serve my needs.

makc commented 6 years ago

why/when exactly would you have a scenario where the slide is taller than the viewport?

in my case this is mostly long-ass text on small screens such as phones or even notebooks.

cmswalker commented 6 years ago

I see, so we'd want to enable overflow-Y and overflow-X inside a slide. Let me have a look

dimisus commented 6 years ago

Overflow-Y might help, yes.

cmswalker commented 6 years ago

So this would require a decent amount of work. The package works via locking scroll so we'd have to disable scroll locking for an overflow slide and the re-lock when the contents of that slide had reached the bottom. You'd also have to apply the inverse logic in order to scroll back up.

Personally, I think it kind of defeats the point of this library if implemented.

If you look at fullpage.js This also doesn't support overflowing the slides. (I just tested by pasting a large chunk of content in the slide)

The slides remain absolute to view height.

It's also a little odd for UX to have scroll locking and unlocking on the viewport. I'd like to support this but it feels a little out of scope for this library and I can't imagine the UX being very good.

If you don't mind my asking. Is there a way you can get your content to fit into a single slide? You could also make it a horizontal slide so the user could paginate between large text bodies.

makc commented 6 years ago

Is there a way you can get your content to fit into a single slide

well we're looking for one ) so far we had to make the copywriters re-do the text to make it shorter, but there is always a resolution that cuts the text somewhere. as a programmer, Idon't decide these things (up todesigners), but when the user runs into this issue, their first complaint is "I can't scroll".

makc commented 6 years ago

seeing how #84 is merged into this, I have another problem with

The package works via locking scroll

namely that react-scroll-box does not work inside the slide.

well it does like 1 time out of 10, and I believe that scroll-swipe thing from your component interferes. but I did not debug it in-depth.

robbiew commented 6 years ago

We're talking about this functionality that exists in fullpage.js, correct? Doesn't sounds like it's on the roadmap for fullpage-react, but wanted to make sure... Thanks!

CusthomeDev commented 6 years ago

@robbiew yes this is it. The fact is that some of us have a content bigger than the screen, so it is great if we can have a classic scroll in a slide.

We also need the implementation of scrollOverflow prop for our project. This option exists in original jQuery lib fullPage.js.

We were thankful if you can port this option in you react lib @cmswalker :)

cmswalker commented 6 years ago

@robbiew @magelanOpenSource I will get it in, but it won't be for a few weeks at least. If this is a need-to-have right now for your use case I recommend the following.

I would imagine anyone using a fullpage-style layout typically doesn't have a component-heavy UI that is getting huge state updates that change each component, so in the meantime I'd recommend using the jquery fullpage.js library but building out all of your other react-components and making multiple calls to ReactDOM.render on each slide inside of the jquery plugin. That way whenever this lib supports the overflow/natural scrolling it will be a quick and easy port over for you

@makc Are you trying to incorporate a react-scroll-box component? It likely doesn't work because ScrollSwipe is in charge of locking + unlocking scrolls based on sensitivity settings on a global (window listener) level, but as long as I allowed an option to unlock per slide it would work. It would be similar to the overflow problem.

robbiew commented 6 years ago

@cmswalker got it. Your recommendation makes total sense.

cmswalker commented 6 years ago

So I've been thinking about this more and more and I've come up with a React API that can wrap the events system of the original fullpage.js library.

I've tested it and it works well with render performance and callback hooks. I'll never get this to 100% feature parity with fullpage so this could be a viable solution. The only 2 tradeoffs I can think of is that fullpage.js requires you to pay for horizontal swiping whereas this lib supports it. (Standard click-based horizontal sliders are supported for free) and that there would be a jquery dependency.

Personally, I think this could be totally worth it as it would produce a 100% compatible API while still giving all of your hooked in components a more "reacty" flow. I'm looking around to make sure such a wrapper doesn't already exist. How would you all feel about this? It would be a a major release due to breaking changes but the api would be very small and the JSX required would be the exact same as the html required by fullpage.js so it would be a very easy migration path that I'd write a guide for.

V1shvesh commented 6 years ago

@cmswalker This sounds cool, although can the jQuery dependency be omitted? Do you think something can be worked out in that regard?

makc commented 6 years ago

@cmswalker

Are you trying to incorporate a react-scroll-box component?

since it did not work, I had to put touchPreventDefault: false in ScrollSwipe options (Fullpage.js) in my 'fork', and then <div style={{width: '100%', overflowX: 'auto', WebkitOverflowScrolling: 'touch'}}> instead of ScrollBox

makc commented 6 years ago

@V1shvesh

can the jQuery dependency be omitted?

there are things like zepto or jbone that may or may not work.

cmswalker commented 6 years ago

in this case it would be a direct wrapper for fullpage.js which is heavily reliant on jquery (and for good reasons). This proposal would expose a react-component API that wraps it, so the jquery dependency will be necessary. (Jquery 3 is currently 30kb minified https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/)

cmswalker commented 6 years ago

I was planning on at least pushing the jquery dependency on the user, so that way we don't risk multiple versions. You can pass it directly as a prop https://github.com/cmswalker/fullpage-react/pull/89/files#diff-c90d23fc26d6eeec89e1d77807b6bbbbR37

robbiew commented 6 years ago

Just FYI -- looks like a non-jquery version of Fullpage.js will be released this month (via email from Alvaro):

Alvaro here!

As you might already know, I'm will very soon release one of the biggest fullPage.js update since it was born 4 years ago.

fullPage.js v3 won't require jQuery anymore! (Finally!) And I am also thinking to improve certain aspects of its API. One of them, the parameters used in the callbacks, such as onSlideLeave.

Maybe a react wrapper to this could do the trick?

R

cmswalker commented 6 years ago

Very nice find @robbiew Thanks for looping me in. Is there a link with more details?

I think this would be perfect! I say we open a new issue and table this in favor of the react wrapper. I have tested the WIP PR I have open and all looks good for the current fullpage.js version, but I'd prefer to wait for a major release until Alvaro releases V3.

In the meantime, I'll publish some of the patches @makc and others have submitted.

robbiew commented 6 years ago

I've alerted him to this thread, as I can't seem to find any more info on the v3 release other than that email snippet and this tweet: https://twitter.com/IMAC2/status/998938850054606851

cmswalker commented 6 years ago

Great! Looks like he has a react-component in the works which would likely deprecate this one, but I don't want to depend on it being released at the same time. I'll lay out the path forward in a new issue https://github.com/cmswalker/fullpage-react/issues/90

Going to close this issue for now, please redirect any migration related concerns/thoughts to https://github.com/cmswalker/fullpage-react/issues/90

cmswalker commented 6 years ago

thanks again to @robbiew for setting this in motion https://github.com/cmswalker/fullpage-react/issues/90 This should get absorbed as an official react wrapper for fullpage.js in the coming weeks

cmswalker commented 6 years ago

For those still wondering, this has been moved to the official fullpage.js project and now has richer functionality

please see #104.