Question

我目前使用的代码一次显示4个div，当用户点击＆＃34;加载更多＆＃34;时，再加载4个div。按钮。

<script>
$(function() {
  $(".post").slice(0, 4).show();
  $("#loadMore").on('click', function(e) {
    e.preventDefault();
    $(".post:hidden").slice(0, 4).slideDown();
    if ($(".post:hidden").length == 0) {
      $("#load").fadeOut('slow');
    }
  });
});
</script>

我如何编辑它，以便当用户滚动到父div的底部而不是单击按钮时，会自动显示四个新的div。

加载的前四个div应该是由于用户点击按钮，然后一旦用户滚动到父div的底部就加载。

<div class="contents">

<div class="post"></div>
<div class="post"></div>
<div class="post"></div>

<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>

</div>

Answer 1

此功能允许您检查屏幕上是否显示给定节点的百分比。

function isVisible (node, percentage) /* 0.50 = 50% */
{
    var rect = node.getBoundingClientRect();
    var over = rect.height * (1 - percentage);

    return rect.top >= -over && rect.bottom <= window.innerHeight + over;
}

window.addEventListener
(
    "scroll", function ()
    {
        var myParentDiv = document.querySelector("") // here obtain your parent div

        if (isVisible(myParentDiv, 1))
        {
            // when the parent div is 100% visible in the viewport, append your 4 elements.
        }
    }
);

这是一个示例，在您添加4个元素后，您必须删除侦听器。

当用户滚动到页面底部时，如何自动加载四个隐藏的div？

1 个答案: