js控制html页面滚动条到底端触发事件
2016-04-06 22:54
435 查看
//文档高度
function getDocumentTop() {
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
if (document.body) {
bodyScrollTop = document.body.scrollTop;
}
if (document.documentElement) {
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyS
4000
crollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; return scrollTop;
}
//可视窗口高度
function getWindowHeight() {
var windowHeight = 0; if (document.compatMode == "CSS1Compat") {
windowHeight = document.documentElement.clientHeight;
} else {
windowHeight = document.body.clientHeight;
}
return windowHeight;
}
//滚动条滚动高度
function getScrollHeight() {
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
if (document.body) {
bodyScrollHeight = document.body.scrollHeight;
}
if (document.documentElement) {
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
return scrollHeight;
}
window.onscroll = function () {
//监听事件内容
if(getScrollHeight() == getWindowHeight() + getDocumentTop()){
//当滚动条到底时,这里是触发内容
//异步请求数据,局部刷新dom
}
}
function getDocumentTop() {
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
if (document.body) {
bodyScrollTop = document.body.scrollTop;
}
if (document.documentElement) {
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyS
4000
crollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; return scrollTop;
}
//可视窗口高度
function getWindowHeight() {
var windowHeight = 0; if (document.compatMode == "CSS1Compat") {
windowHeight = document.documentElement.clientHeight;
} else {
windowHeight = document.body.clientHeight;
}
return windowHeight;
}
//滚动条滚动高度
function getScrollHeight() {
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
if (document.body) {
bodyScrollHeight = document.body.scrollHeight;
}
if (document.documentElement) {
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
return scrollHeight;
}
window.onscroll = function () {
//监听事件内容
if(getScrollHeight() == getWindowHeight() + getDocumentTop()){
//当滚动条到底时,这里是触发内容
//异步请求数据,局部刷新dom
ajax_function()
}
}
相关文章推荐
- js实现自定义话框的移动和剧中显示
- jsp页面可输入下拉框实现
- js执行时间(调试)
- Javascript事件详解
- json串与对象转换
- JS中的实例方法与静态方法
- 关于 javascript 处理json格式日期转换的方法
- JavaScript基础教程01编辑器的选择和两种链接方法
- 实用的图片轮播js代码可直接引用不需要设置css样式
- JavaScript之数据类型转换——隐式转换与运算符
- JavaScript 自定义事件
- js EventUtil addhandler removehandler
- 【新人笔记16.04.06】JS--定义属性
- javascript双等号引起的类型转换
- 论如何让json更懂中文?
- iOS js oc相互调用(JavaScriptCore)(二)
- JavaScript实现的三个构成部分
- 写一个js向左滑动删除 交互特效的插件——Html5 touchmove
- JS中关于clientWidth offsetWidth scrollWidth 等的含义
- 登陆界面设计,如果用户名密码为空javascript提醒