Search code examples
javascriptmobilescrollskrollr

Applying skrollr on specific scrollable div


On a certain project; the html and body scroll is blocked with overflow:hidden, max-width/height at 100%. No scroll on those.

What is scrollable is a specific div; on which overflow-y:scroll and -webkit-overflow-scrolling: touch are applied (this scrollable div is classed with .frames, and for the moment let's says there is only one)

I'd like to use skrollr; hence having the plugin to detect the scroll of this .frames div.

Thing is, it does not work. I then added #skrollr-body to the div .frames.

Result : skrollr is enabled on mobile and works as expected. (not that smooth, but works).

But, on desktop, no effect. If I log on desktop with :

$(".frames#skrollr-body").scroll ->
    console.log s.getScrollTop()

( 's' being the name of the skrollr.init action), the output remains 0.

So in the end it seems that skrollr only works for the body on desktop. Is there something to be done right here for it to work ? Thanks a lot for any clues


Solution

  • Sad but true, I found this answer from the author:

    skrollr only gets the scroll position from the window. You can't use an arbitrary element with overflow:auto. You should rather try to find the reason why the fixed elements were doing crazy stuff on mobile. They should work just fine since only the skrollr-body element if moving. – Prinzhorn Oct 15 '13 at 6:59

    HERE THE LINK