Material Design Lite with Jetpack Infinite Scroll

Hello,

I'm using MDL and want using Infinite Scroll. MDL is using '.mdl-layout__content' to scroll (overflow-y: scroll) and I don't think that any changes in that will work s expected.

But you can give option to get it work. In infinity.js:

Scroller = function( settings ) {
...
this.window           = $('.mdl-layout__content') ? $( window ) : $('.mdl-layout__content'); //now we have this.window bind to proper object.

And another thing. Don't know why, but even without this change I have wrong scope in bind and setInvterval functions. So now:

this.window.bind( 'scroll.infinity', function() {
                        self.throttle = true; //HERE changed this to self so I have good scope.
                });

                // Go back top method
                self.gotop();

                setInterval( function() {
                        if ( self.throttle ) {//HERE changed this to self so I have good scope.

                                self.throttle = false;//HERE changed this to self so I have good scope.

                                // Reveal or hide footer
                                self.thefooter();
                                // Fire the refresh
                                self.refresh();
                self.determineURL(); // determine the url
                        }
                }, 250 );

Now it is working!

But if you don't want for some reason implement it, I have solution which I used. Maybe someone would like to use it.

In functions.php in javascript side

jQuery(document).ready( function() {
        jQuery(".mdl-layout__content").bind('scroll.infinity', function(){
            infiniteScroll.scroller.throttle = true;
        });

              //unfortunately then I have to make set inteval second time :(
setInterval( function() {
                        if ( infiniteScroll.scroller.throttle ) {
                                self = infiniteScroll.scroller;
                                self.throttle = false;
                                self.thefooter();
                                self.refresh();
                                self.determineURL(); // determine the url
                        }
                }, 250 );

});

Automattic / jetpack

Material Design Lite with Jetpack Infinite Scroll #4047