$(window).scroll does not work with IE11

问题:

Hi i've made an endless scroll function to fetch ajax data, its working perfecly but not in iE 11

part of code :

$(window).load(function(){
  $(window).scroll(function(){
         if($(window).scrollTop() >= ($(document).height() - $(window).height())){
          limitFeeds += 30;
          getFeeds("noloop",limitFeeds);
         }
  });
});

any issues ?

Thanks

回答1:

jQuery's abstract method for handling scroll events works as expected in Internet Explorer. Note however that jQuery 2.x is intended for IE9+, while jQuery 1.x is reserved for IE8 and below. Be sure you are using the property version for the browsers you intend to target.

The following (using lodash for debounce) renders the results you're expecting in IE11:

(function () {

    "use strict";

    var debounced = _.debounce(function () {
        if ($win.scrollTop() >= $doc.height() - $win.height()) {
            // AJAX here
        }
    }, 250);

    var $doc = $(document), 
        $win = $(window).on("scroll", debounced);

}());

You can test this online here: http://jsfiddle.net/jonathansampson/74cTx/

If you continue to have issues, I would look to your getFeeds method to determine whether it is working as you expect it to or not. If you share the implementation here, we'd be happy to assist you in resolving the issue further.

回答2:

I had this same problem. For me it seemed IE11 was 1 pixel off on every other scroll. I solved it by allowing a small variation:

if ($(window).scrollTop() - ($(document).height() - $(window).height()) <= 5) && ($(window).scrollTop() - ($(document).height() - $(window).height()) >= -5)) 
{ 
    LoadMore(); 
}