Use jQuery to automatically load when scrolling to the bottom-JS Tutorial-php.cn

Use jQuery to automatically load when scrolling to the bottom

亚连

Release： 2018-06-05 17:10:15

Original

1505 people have browsed it

This article mainly introduces jQuery's method of automatically loading more when scrolling to the bottom, involving jQuery's implementation skills of dynamically operating page elements based on ajax. Friends in need can refer to the following

The examples in this article are described jQuery implements a method to 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 scrolling to the end loading data function:

<!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>

Copy after login

The above is what I compiled for everyone, I hope it will be helpful to everyone in the future.

About the problem of extracting project-related configuration files when vue-cli is packaged (detailed tutorial)

Making a sliding stack component by using vue (detailed tutorial)

About using fetch to upload images in React Native (detailed tutorial)

The above is the detailed content of Use jQuery to automatically load when scrolling to the bottom. For more information, please follow other related articles on the PHP Chinese website!