先上原理图:
判断滚动条是否到临近页面底部,关键是求得上图中 ? 的数值,明显看出这个值 = 文档总高度 - 已滚动部分的高度 - 当前视口高度,所以有如下代码:
var minAwayBtm = 100 // 距离页面底部的最小距离$(window).scroll(function() {
var awayBtm = $(document).height() - $(window).scrollTop() - $(window).height()
console.log('当前距离页面底部:' + awayBtm + 'px')
if (awayBtm <= minAwayBtm) {
console.log('触发了')
}
})
这篇文章主要介绍了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>