(window).scroll issue with IE, IE seems to not update straight after dynamic input

JavaScript
1

I’m trying to get lazy scrolling working in IE

There are jQuery libraries for this (but its fairly simple, extra libraries aren’t needed)

What I want to do, is add to the inner when the vertical scroll bar gets to about 75% from the top. The method I use is:

jQuery(window).scroll(function(){
	if  (jQuery(window).scrollTop() > ((jQuery(document).height() - jQuery(window).height())*0.75)){
		loadSection(); // a function that dynamically adds to the innerHTML
    } 
});

This seems to work fine in FireFox and Chrome, but in IE once we get to the 75% position, the vertical position/value doesn’t seem to update after dynamically loading in the content.

When this happens in IE, all of the data gets loaded in (since after loading in the innerHTML section, IE thinks the scroll bar is still at ~75%). Sometimes this will result in all of the content being loaded in one go.

Does anyone know a work around to stop IE from doing this?

You can see this happening here:
rightsfortenants.co.uk/tenancylaw.php?act=landlord-and-tenant-(covenants)-act-1995 (it still looks a bit ugly, since I need to update the css)

2

Is it possible to use setInterval to regularly check the scroll position? That might give the scrollbar time to readjust itself.

3

Hmm, I guess that’s a possible solution.

I could either use a method to give IE a breather, so it updates (it’s not great, since I’d like this to work as fast as possible).
Another way around this, I thought, might be to manually set the vertical scroll to < 75 after the update, but this would be ‘jumpy’.

Neither of these possibilities is perfect, yet I’ve seen lots of lazy scrolling sites. I think I might have a deep nose into their script and see how they did it

Thanks Paul

4

okay, I found a solution to my IE issue (its more of a hack than a solution)
but thought I would share it, for anyone else that runs into this

I ended up using both methods (breather and set vertical scroll)
but for the breather, I checked that the function hadn’t been called in the last 200ms, and I set the vertical before inserting the innerHTML:

		
var thismsecttimestamp = 0;
var lastmsecttimestamp = 0; 
jQuery(window).scroll(function(){
	// Only update if at least 200ms has past since this function was last called (stop floods / multiloading)	
 	var d3 = new Date();
	thismsecttimestamp = d3.getTime();
	if ((thismsecttimestamp - lastmsecttimestamp  > 200)){						 
		if  (jQuery(window).scrollTop() > ((jQuery(document).height() - jQuery(window).height())*0.87)){
			    jQuery(window).scrollTop(((jQuery(document).height() - jQuery(window).height())*0.87));		    			
	    		    loadSection(); // a function that dynamically adds to the innerHTML
       			    var d3 = new Date();
			    lastmsecttimestamp = d3.getTime(); 	
    		} 
    	}
}
  • I’m sure there is a tidier way of writing this :wink:

Thanks again paul for the nudge in this direction