jQuery(JS)怎么判断滚动条快到底部了就触发函数

JavaScript053

jQuery(JS)怎么判断滚动条快到底部了就触发函数,第1张

先上原理图:

判断滚动条是否到临近页面底部,关键是求得上图中 ? 的数值,明显看出这个值 = 文档总高度 - 已滚动部分的高度 - 当前视口高度,所以有如下代码:

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>