load disqus comments on single pages based on the scroll event

问题

I have applied disqus comments on my single blog page which consists of many posts on one page.

<div>
     <article class='post hentry' expr:data-id='data:post.id' expr:data-url='data:post.url'>
    .............
    </article>
    <div class='showDisqus' data-title='MyTitle' expr:data-id='data:post.id' expr:data-url='data:post.url'>Show Comments</div>
</div>

<div>  
     <article class='post hentry' expr:data-id='data:post.id' expr:data-url='data:post.url'>
    .............
    </article>
    <div class='showDisqus' data-title='MyTitle' expr:data-id='data:post.id' expr:data-url='data:post.url'>Show Comments</div>
</div>

<div>
   <article class='post hentry' expr:data-id='data:post.id' expr:data-url='data:post.url'>
    .............
    </article>
    <div class='showDisqus' data-title='MyTitle' expr:data-id='data:post.id' expr:data-url='data:post.url'>Show Comments</div>
</div>

The following code I use.

$('.showDisqus').on('click', function(){   // click event of the show comments button
    var this_ = $(this);
        disqus_shortname = 'example',
        title = $(this).attr('data-title'),
        identifier = parseFloat($(this).attr('data-id')),
        url = $(this).attr('data-url');

    if (window.DISQUS) {

        DISQUS.reset({ // Remove the old call
          reload: false,
          config: function () {
          this.page.identifier = window.old_identifier;
          this.page.url = window.old_url;
          this.page.title = window.old_title;
          }
        });
        $('.showDisqus').show();
        $('#disqus_thread').remove();

        $('<div id="disqus_thread"></div>').insertAfter(this_);

        setTimeout( function() { // Creates a new call DISQUS, with the new ID
            DISQUS.reset({
              reload: true,
              config: function () {
              this.page.identifier = identifier;
              this.page.url = url;
              this.page.title = title;
              }
            });
            window.old_identifier = identifier;
            window.old_url = url;
            window.old_title = title;
        });

    } else {

        var disqus_identifier = parseFloat(identifier),
            disqus_title = title,
            disqus_url = url;

        $('<div id="disqus_thread"></div>').insertAfter(this_);

        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();

        setTimeout( function() { // Sorry, there must be a better way to force the ID called correctly
            DISQUS.reset({
              reload: true,
              config: function () {
              this.page.identifier = identifier;
              this.page.url = url;
              this.page.title = title;
              }
            });
        },500);

        window.old_identifier = identifier;
        window.old_url = url;
        window.old_title = title;

    }
    $(this).fadeOut();  // remove the show comments button
});

disqus comments will appear below the post by clicking the button, but I want something more simple, so disqus comments will appear automatically when the visitor scrolls the screen to the bottom of the post. How can i do it?

来源：https://stackoverflow.com/questions/51090957/load-disqus-comments-on-single-pages-based-on-the-scroll-event