Home >Web Front-end >JS Tutorial >Use jQuery to automatically load when scrolling to the bottom

Use jQuery to automatically load when scrolling to the bottom

亚连Original: 2018-06-05 17:10:151572browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement the same interview question component using angular, react and vueNext article：How to implement the same interview question component using angular, react and vue

See more

Use jQuery to automatically load when scrolling to the bottom

Related articles