Skrollr: fullPage.js compatibility

Question

specifying this question: https://github.com/Prinzhorn/skrollr/issues/444

Source code can be found here

I want them kittehs 200x200 to move to center via skrollr data-attributes as I scroll inside second section. I.e. an instance of skrollr should affect <div class="skrollr-1">. Just don't get what is wrong. Console keeps quiet.

SlimScroll.js wraps div.skrollr-1 into two blocks:

<div class="slimScrollDiv" style="position: relative; overflow: hidden;">
<div class="scrollable" style="overflow: hidden;">
<div class="skrollr-1">

which is mentioned by the author to be inappropriate. But setting overflow:auto!important on these divs takes no effect.

UPD Since skrollr

gets the scroll position from the window

I tried to use viewport mode as referenced in the docs, no effect.

UPD2 Not quite sure if I got skrollr zen right, how the viewport mode is meant to work while sticking skrollr to DOM element is not provided?

UPD3 FullPage.js developer reported that the problem is not with his plugin

Patience is the key as always. Universe-scale thanks for any idea

Answer 1

It seems skrollr only works over the window main scrolling.

You can read a similar topic here and here the discussion on its github issues forum.

Update

You can now use skrollr in combination with fullpage.js if you set the option scrollBar:true in fullpage.js. This will maintain the auto scrolling option but will show a scroll bar in the side. Which can be considered as a better practise form the user experience point of view.

Here´s an online example of fullpage.js with scrollBar:true.