滚动条滚动到底部触发事件-白红宇

滚动条滚动到底部触发事件

阅读量：6265 次

发布时间：2019-06-22

本文共 1551 字，大约阅读时间需要 5 分钟。

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

$(function() {

$("#contain").scroll(

function() {

var $this = $(this), viewH = $(this).height(), //可见高度

contentH = $(this).get(0).scrollHeight, //内容高度

scrollTop = $(this).scrollTop();//滚动高度

console.log("viewH:" + viewH + " contentH:" + contentH + " scrollTop:" + scrollTop);

//if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容

if (scrollTop / (contentH - viewH) >= 0.95) { //到达底部100px时,加载新内容

// 这里加载数据..

alert("这里加载数据..");

}

});

scrollBottomTest = function() {

}

})

</script>

</head>

<body>

<div id="contain"

style="width: 100%; height: 500px; overflow: auto; border: solid red 1px;">

这里加载数据..<br> 这里加载数据..<br> 这里加载数据..<br> 这里加载数据..<br>

这里加载数据..<br> 这里加载数据..<br>这里加载数据..<br> 这里加载数据..<br>

</div>

</body>

</html>

转载地址：http://kudpa.baihongyu.com/

你可能感兴趣的文章

安装mysql报错，错误提示：Incorrect definition of table mysql.proc

系统目录结构、ls命令、文件类型、alias命令

shell脚本之重定向、标准输入、输出、错误输出的使用

查看>>

如何从Google官网下载Chrome离线安装包

查看>>

JAR——CircleImageView

查看>>

Centos6.5下rsync文件同步安装及配置当中遇到的问题及解决方法