Intersection Observer API is not available

Question

I developed a website with infinite Scrolling. My webpage load the content with that technology in google chrome. But When load and scrolling the webpage in Internet explore, It display an error "Intersection Observer API is not available". How to fix the issue?

Here is my code

(function ($) {
    $.fn.infiniteScroll = function (options) {

        var observer, filesControl = 0, settings;
        settings = $.extend({
            files: [],
            preloaderColor: "#000",
            fadeDuration: 300,
            beforeLoadNewContent: function () { },
            processData: function(data){               
                var content =''+(data)+'';
                $('.' + settings.markSelector).before(content);
                $(content).fadeTo(settings.fadeDuration, 1);
            },
            afterLoadNewContent: function () { },
            onEnd: function () { }
        }, options);
        settings.markSelector;

        infiniteContentLoader = function (entry) {
            if (entry[0].isIntersecting && !$(".infiniteContentPreloader").is(":visible") && filesControl < settings.files.length) {
                $(".infiniteContentPreloader").toggle();
                $.ajax({
                    type: "GET", 
                    url:settings.files[filesControl], 
                    dataType: "html", 
                    success:function (data) {                  
                        settings.beforeLoadNewContent();
                        $(".infiniteContentPreloader").toggle();                   
                        settings.processData(data);
                        filesControl++;
                        settings.afterLoadNewContent();
                    }
                });
            } else if(entry[0].isIntersecting && !$(".infiniteContentPreloader").is(":visible") && filesControl >= settings.files.length) {
                observer.disconnect();
                settings.onEnd();
            }
        }

        infiniteScroll = function (element) {
            settings.markSelector = "infiniteContentMark_" + Date.now();
            var mark = '';
            $(element).append(mark);

           $(document).ready(function () {
                $('.' + settings.markSelector).html('');

                if (!('IntersectionObserver' in window)) {
                    console.log("Intersection Observer API is not available");
                } else {
                    var options = {
                        root: null,
                        rootMargin: '0px',
                        threshold: 0
                    }
                    observer = new IntersectionObserver(infiniteContentLoader, options);
                    var infiniteContentMark = $('.' + settings.markSelector).toArray()[0];
                    observer.observe(infiniteContentMark);
                }
            });
        }

        if (this.length > 0) {
            return infiniteScroll(this);
        }
    };
})(window.jQuery || window.Zepto || window.$);

user_4733161 · Answer

Internet Explorer doesn't support Intersection Observer.

Luckily W3C provides a polyfill that you can use. https://github.com/w3c/IntersectionObserver/tree/master/polyfill

With this you can continue to use the Intersection Observer as usual and older browsers will instead use events bound to the scroll event (not as performant as native Intersection Observer)

user_687901 · Answer

But When load and scrolling the webpage in Internet explore

The reason seams to be simple to find, but ~~probably difficult to fix~~:

 if (!('IntersectionObserver' in window)) {
   console.log("Intersection Observer API is not available");
 }

Means that the browser does not support the IntersectionObserver. In other words: the code will most likely only work in the browsers listed here

As mentioned in the answer of @cloned, it should be easy to fix, if you include the polyfill.

user_1809386 · Answer

I'd recommend using the polyfill.io service. If you include the following code in your page:

It will automatically ship the required polyfill based on the browser. So if a user is on Chrome which doesn't need the polyfill it won't even ship those bytes to the browser.

user_5746074 · Answer

I used this package in my own case https://www.npmjs.com/package/intersection-observer

then use as so: import 'intersection-observer'

Intersection Observer API is not available

4 Answers