Automattic / Automattic/jetpack
Material Design Lite with Jetpack Infinite Scroll
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
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 );
});
```
Contributor guide
Research direction
Start in infinity.js and compare its scroll binding with the .mdl-layout__content integration shown in the report; functions.php contains the workaround example. Reproduce the issue with Material Design Lite's scrolling container, then verify that infinite-scroll callbacks use the intended scope and respond to that container without requiring a duplicate interval.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, wordpress
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100