js 滚动事件

0o子若o0 2016-05-13 11:07:34

我想要的是，当鼠标滚动轮滚到最后才触发函数，或者用户点击滚动条到放开滚动条那一刻才触发函数，请问怎么做

...全文

108 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2016-05-13

打赏
举报


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
#id {
	height: 200px;
	background-color: #999;
	overflow: auto;
}
</style>
</head>
<body>
<div id="id">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
	<p>5</p>
	<p>6</p>
	<p>7</p>
	<p>8</p>
	<p>9</p>
	<p>10</p>
	<p>11</p>
	<p>12</p>
	<p>13</p>
	<p>14</p>
	<p>15</p>
	<p>16</p>
	<p>17</p>
	<p>18</p>
	<p>19</p>
	<p>20</p>
	<p>21</p>
	<p>22</p>
	<p>23</p>
	<p>24</p>
	<p>25</p>
	<p>26</p>
	<p>27</p>
	<p>28</p>
	<p>29</p>
	<p>30</p>
</div>
<script type="text/javascript">
var div = document.getElementById("id");
div.onscroll = function () {
	if (this.scrollTop==this.scrollHeight-this.offsetHeight) {
		alert("滚动到最后了");
	}
}
</script>
</body>
</html>

daily886 2016-05-13

打赏
举报

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 </body> </html> <script> //滚动条在Y轴上的滚动距离 function getScrollTop(){ 　　var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; 　　if(document.body){ 　　　　bodyScrollTop = document.body.scrollTop; 　　} 　　if(document.documentElement){ 　　　　documentScrollTop = document.documentElement.scrollTop; 　　} 　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; 　　return scrollTop; } //文档的总高度 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; } //浏览器视口的高度 function getWindowHeight(){ 　　var windowHeight = 0; 　　if(document.compatMode == "CSS1Compat"){ 　　　　windowHeight = document.documentElement.clientHeight; 　　}else{ 　　　　windowHeight = document.body.clientHeight; 　　} 　　return windowHeight; } var arr = new Array(); window.onscroll = function(){ var pagehei = getScrollTop() + getWindowHeight(); //页面距离 arr.push(pagehei); //这里输出的是松开鼠标时触发的 document.onmouseup = function(){ if(arr[arr.length-1] != arr[arr.length-2]){ arr = new Array(); alert('松开'); } } 　　if(pagehei == getScrollHeight()){ //这里是判断滚轮到底底部才触发的 arr = new Array(); alert('到底了'); 　　} }; </script> 不好意思，上面的有点bug，现在试下这个

daily886 2016-05-13

打赏
举报

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 </body> </html> <script> //滚动条在Y轴上的滚动距离 function getScrollTop(){ 　　var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; 　　if(document.body){ 　　　　bodyScrollTop = document.body.scrollTop; 　　} 　　if(document.documentElement){ 　　　　documentScrollTop = document.documentElement.scrollTop; 　　} 　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; 　　return scrollTop; } //文档的总高度 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; } //浏览器视口的高度 function getWindowHeight(){ 　　var windowHeight = 0; 　　if(document.compatMode == "CSS1Compat"){ 　　　　windowHeight = document.documentElement.clientHeight; 　　}else{ 　　　　windowHeight = document.body.clientHeight; 　　} 　　return windowHeight; } window.onscroll = function(){ var pagehei = getScrollTop() + getWindowHeight(); //页面距离 //这里输出的是松开鼠标时触发的 document.onmouseup = function(){ alert('松开'); } 　　if(pagehei == getScrollHeight()){ //这里是判断滚轮到底底部才触发的 alert('到底了'); 　　} }; </script> 你测试下