Automattic / Automattic/jetpack

Material Design Lite with Jetpack Infinite Scroll

Open
#4,047 1 comment 0 reactions 0 assignees View on GitHub
[Feature] Infinite Scroll Enhancement Good For Community
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.