html判断滚动条是否到达底部

最新推荐文章于 2023-06-16 13:31:38 发布

a ni you

最新推荐文章于 2023-06-16 13:31:38 发布

阅读量4.9k

点赞数 1

分类专栏： htm 文章标签： html scroll

本文链接：https://blog.csdn.net/itlqi/article/details/46759019

版权

htm 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<%@ 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">

/**    
 * 判断滚动条是否到最底端的方法   
 * @param Element obj   
 */              
function isScrollBottom(obj) {  
   if (obj.scrollTop + obj.clientHeight === obj.scrollHeight) {  
       return true;  
   } else {  
       return false;  
   }  
}  
 
$(function(){  
   /**  
     *绑定滚动事件  
     */  
   $('#scrdiv').scroll(function(e) {  
       if (isScrollBottom(this)) {  
               // 滚动到底端了TODO加载内容 
               //加载数据
      		alert('已经到低端了');  
           } else {  
               // 没有滚动到底端TODO 其他处理  
           }         
   });  
});

function exce(){
	window.open(url);
	
}
</script>
</head>


<body>


	<div id="scrdiv"
		style="height: 130px; width: 230px; overflow-y: scroll; border: 1px solid red;">
		数据在这里表示 数据在这里表示 数据在这里表示 数据在这里表示 数据在这里表示 数据在这里表示 数据在这里表示 数据在这里表示
		数据在这里表示 数据在这里表示 数据在这里表示 数据在这里表示 数据在这里表示 数据在这里表示 数据在这里表示 数据在这里表示
		数据在这里表示 数据在这里表示 数据在这里表示 数据在这里表示</div>


	fffffffffffffffffff
	<input type="button" οnclick="exce()" value="exce">;

</body>
</html>