Odtnhj

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 ='<div>'+(data)+'</div>';
 $('.' + 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 = '<div class="' + (settings.markSelector) + '" style="width:100%;"></div>';
 $(element).append(mark);

 $(document).ready(function () 
 $('.' + settings.markSelector).html('<div class="infiniteContentPreloader" style="width: 150px; height: 150px; margin: 0 auto; display: none;"><svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml: space="preserve"><circle fill="'+ (settings.preloaderColor) + '" strok="none" cx="6" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1"></animate></circle><circle fill="'+ (settings.preloaderColor) + '" stroke="none" cx="26" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2"></animate></circle><circle fill="'+ (settings.preloaderColor) + '" stroke="none" cx="46" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.3"></animate></circle></svg></div>');

 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.$);

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)

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.

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

<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

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.