dcurletti/redux-infinite-scroll

Window scroll fails with MDL as well as some other cases where window.pageYOffset is always 0

Closed this issue · 4 comments

Ability to take a DOM element (or selector or something) that can be used for calculating scroll.
With MDL, document.getElementsByTagName('main')[0].scrollTop worked.

Not familiar with MDL, but I see your point. Would you mind giving a more detailed example of your use case? A plnkr or fiddle would be great.
Thanks!

Go to page https://getmdl.io/ and open developer console. Run window.pageYOffset. It will always return 0. This will work just fine on yahoo.com giving correct values. This 0 behavior is because of the following css in material.css

.mdl-layout {
display: flex;
flex-direction: column;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: relative;
width: 100%;
}

Gotcha. Thanks for the example. There they don't scroll the window, the scroll an element, which you can also do with redux-infinite-scroll.

From our Readme:

Important If you are using an element as the scrollable component, rather than the window, you MUST pass a fixed height to the containerHeight prop.

By default, elementIsScrollable is set to true, so it's assumed you aren't listening to the window.

I'm closing this, but feel free to ask more questions if you need to.

Wait, I thought scrolling element only works with the element that infinite scroll makes i.e. "holder" element or the div above it. Not a top level div. How do u point the redux infinite scroll to listen to the scroll event of the top scrolling element which is not body/window.