jQuery 你怎么知道滚动条已经到达页面底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5060389/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you know the scroll bar has reached bottom of a page
提问by Amal Kumar S
I have a HTML page, when the scroll bar reaches bottom of the page I need to slide in a div from bottom-right containing an iframe.
我有一个 HTML 页面，当滚动条到达页面底部时，我需要从右下角滑动一个包含 iframe 的 div。
Using JQuery I have implemented the sliding effect for the div containing the iframe. At present the sliding is done by clicking a button(on button click event). How could I change this, so that when the scroll bar reaches bottom the div containing the iframe automatically slides in.
使用 JQuery 我已经为包含 iframe 的 div 实现了滑动效果。目前滑动是通过点击一个按钮来完成的（在按钮点击事件上）。我该如何改变这一点，以便当滚动条到达底部时，包含 iframe 的 div 会自动滑入。
My HTML page code is
我的 HTML 页面代码是
<style>
.slide {
background-color: #FFFFCC;
border: 1px solid #999999;
height: 900px;
margin: 1em 0;
overflow: hidden;
position: relative;
width: 100%;
}
.slide .inner {
background: #44CC55;
bottom: 0;
/*height: 650px;*/
height: auto;
left: 0;
padding: 6px;
position: absolute;
width: 650px;
border: 1px solid red;
}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$('#slidemarginleft button').click(function(){
var $marginLefty = $(this).next();
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 1300 ? 655 : 1300
});
});
});
</script>
<div id="slidemarginleft" class="slide">
<button>slide it</button>
<div class="inner" style="margin-left: 1300px;"><iframe width="600" scrolling="no" height="600" frameborder="0" src="http://google.com">
</iframe></div>
</div>
回答by prasanna
You would to use the scroll function in jquery to check the position if it has reached document.height or window.height values. Something along the lines of this (I haven't verified it)
如果它已达到 document.height 或 window.height 值，您将使用 jquery 中的滚动功能来检查位置。类似的东西（我还没有验证过）
$(window).scroll(function(){
console.log($(window).scrollTop() == ($(document).height() - $(window).height()));
})
回答by Srijan Gupta
if($(window).scrollTop() + screen.height > $('body').height())
{
//do whatever
}
回答by Kugutsumen
if (document.documentElement.clientHeight +
$(document).scrollTop() >= document.body.offsetHeight )
{
// Display alert or whatever you want to do when you're
// at the bottom of the page.
alert("You're at the bottom of the page.");
}
回答by Kamlesh
<!DOCTYPE HTML>
<html>
<head>
<title>JQuery | Detecting when user scrolls to bottom of div.
</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<body style="text-align:center;" id="body">
<h1 style="color:green;">
Data Center
</h1>
<p id="data_center" style="font-size: 17px; font-weight: bold;"></p>
<center>
<div class="div" style="width:200px; height:150px; overflow:auto;">
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
</div>
</center>
<script>
$('#data_center').text('Scroll till bottom to get alert!');
jQuery(function($) {
$('.div').on('scroll', function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
alert('End of DIV has reached!');
}
});
});
</script>
</body>
</html>
This worked for me. Enjoy the code :)
这对我有用。享受代码:)
