Home >Web Front-end >JS Tutorial >JS simply implements sliding loading data instance sharing

JS simply implements sliding loading data instance sharing

小云云
小云云Original
2018-01-09 14:03:122115browse

This article mainly introduces the method of simply implementing sliding loading of data in JS, involving techniques related to javascript event response and dynamic operation of page element attributes. Friends in need can refer to it. I hope it can help everyone.

//滑动
function getScrollTop()
{
 var scrollTop = 0;
 if (document.documentElement && document.documentElement.scrollTop) {
   scrollTop = document.documentElement.scrollTop;
  }else if (document.body) {
  scrollTop = document.body.scrollTop;
  }
  return scrollTop;
}
//获取当前可视范围的高度
function getClientHeight()
{
 var clientHeight = 0;
 if (document.body.clientHeight && document.documentElement.clientHeight) {
   clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
 }else {
   clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
 }
   return clientHeight;
}
//获取文档完整的高度
function getScrollHeight()
{
   return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}
//绑定事件
window.onscroll = function ()
{
 if (getScrollTop() + getClientHeight() == getScrollHeight()) {
  //dosomething
 }
}

Related recommendations:
javascript - js How to limit the number of sliding loads during sliding loading

Javascript vue.js table Pagination, ajax asynchronous loading of data

Bootstrap treeview realizes dynamic loading of data and quick search function

The above is the detailed content of JS simply implements sliding loading data instance sharing. 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