具体的实现方法如下：
$(window).scroll(function() {
如果滚动的高度加上窗口的高度等于页面的高度就是到了底部
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!")//已经滚动到底部
}
})
或者也可以写专用方法检测高度：
function getDocHeight() {
var D = document
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
)
}
然后再用以下方法检测：
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == getDocHeight()) {
alert("bottom!")
}
})
这篇文章主要介绍了js判断iframe内的网页是否滚动到底部触发事件,需要的朋友可以参考下之前有个需求是要判断iframe内的网页是否滚动到底部触发事件,
网上找了许多资料都是说在当前页面下的,
索性就自己研究了一下,
找到了解决方法.
clientHeight：这个元素的高度，占用整个空间的高度
offsetHeight：是指元素内容的高度
scrollTop：可以理解为滚动条可以滚动的长度
以下是源代码
代码如下:
<iframe
src="~/Files/3.html"
id="iframepage"
width="825"
onload="func()"></iframe>
<script
type="text/javascript">
function
func()
{
var
ifm
=
document.getElementById("iframepage")
ifm.height
=
window.document.body.clientHeight
-
100
}
<!--在chrome有兼容问题，FF和IE10无问题，网上说chrome访问iframe要在服务器环境下，不知道什么情况-->
window.document.getElementById("iframepage").contentWindow.onscroll
=
function
aaa()
{
var
ifm
=
document.getElementById("iframepage").contentWindow.document.documentElement
if
(ifm.scrollTop
==
ifm.scrollHeight
-
ifm.clientHeight)
{
alert("到底了")
}
}
</script>
先上原理图：
判断滚动条是否到临近页面底部，关键是求得上图中 ? 的数值，明显看出这个值 = 文档总高度 - 已滚动部分的高度 - 当前视口高度，所以有如下代码：
var minAwayBtm = 100 // 距离页面底部的最小距离$(window).scroll(function() {
var awayBtm = $(document).height() - $(window).scrollTop() - $(window).height()
console.log('当前距离页面底部：' + awayBtm + 'px')
if (awayBtm <= minAwayBtm) {
console.log('触发了')
}
})
