Home > Web Front-end > JS Tutorial > Implement scrolling refresh effect based on jQuery

Implement scrolling refresh effect based on jQuery

高洛峰
Release: 2017-01-11 09:54:06
Original
1291 people have browsed it

Jquery implements a simple scrolling refresh effect:

Actual situation: Use Ajax to obtain background data and update the front-end page to achieve the page scrolling refresh effect

HTML text:

<form id="form1" runat="server">
<div style="height: 3000px; background-color: yellow;">
</div>
</form>
Copy after login

Javascript operation code:

$(document).ready(function() {
 
 $(window).scroll(function() {
//$(document).scrollTop() 获取垂直滚动的距离:最小值为0,最大值:文档高度-可视化窗口高度
//$(document).scrollLeft() 这是获取水平滚动条的距离
  console.log("垂直滚动条位置:"+$(document).scrollTop()+"--"+$(window).height());
 
 if ($(document).scrollTop() <= 0) {
    console.log("滚动条已经到达顶部为0");
  }
 
  /**
   *$(document).height():文档的高度
   *$(window).height():可视域的高度:窗口的大小:根据浏览窗口的大小变化
   *判断底部:文档高度<=滚动条垂直高度+可视窗口的高度
   * */
  if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
   console.log("滚动条已经到达底部为" + $(document).scrollTop());
  }
});
 });
Copy after login

Effect:

Implement scrolling refresh effect based on jQuery

The above is the summary of this article All the content, I hope it will be helpful to everyone's learning, and I also hope everyone will support the PHP Chinese website.

For more articles related to implementing scrolling refresh effect based on jQuery, please pay attention to the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template