SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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:


    Code:
    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-%28covenants%29-act-1995 (it still looks a bit ugly, since I need to update the css)

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Is it possible to use setInterval to regularly check the scroll position? That might give the scrollbar time to readjust itself.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    		
    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

    Thanks again paul for the nudge in this direction


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •