Home >Web Front-end >JS Tutorial >How to automatically load more content when the scroll bar slides to the bottom

How to automatically load more content when the scroll bar slides to the bottom

php中世界最好的语言Original: 2018-03-14 17:06:573643browse

This time I will show you how to automatically load more content when the scroll bar slides to the bottom Automatic loading , and how to automatically load more content when the scroll bar slides to the bottom Notes What are they? Here are actual cases. Let’s take a look.

The example in this article describes how jQuery can automatically load more when scrolling to the bottom. Share it with everyone for your reference, the details are as follows:

AJAX is used here to realize the function of scrolling to the end to load data:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script src="js/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      AddSth();
    });
    $(function () {
      $(".main").unbind("scroll").bind("scroll", function (e) {
        var sum = this.scrollHeight;
        if (sum <= $(this).scrollTop() + $(this).height()) {
          AddSth();
        }
      });
    });
    function AddSth() {
      $.ajax({
        type: &#39;POST&#39;,
        url: "index.aspx/ReturnSth",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        //data: "",
        success: function (data) {
          json = $.parseJSON(data.d);
          for (var i in json) {
            var tbBody = "<ul><li>" + json[i].sth + "</li></ul>";
            $(".main").append(tbBody);
          }
          $(".main").append("<hr />");
        }
      });
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <p>下拉加载更多</p><br />
    <p class="main" style="border: 1px solid red; height: 700px; overflow: auto;"></p>
  </form>
</body>
</html>

I believe you have mastered the method after reading the case in this article, please pay attention for more exciting things Other related articles on php Chinese website!

How to automatically load more content when the scroll bar slides to the bottom

Related articles