vue js 监听页面滚动触底 && 监听iframe滚动及触底 && 带你搞清 offsetHeight，scrollTop，scrollHeight区别

想要监听页面滚动是否触底，你要先搞清 offsetHeight，scrollTop，scrollHeight区别，以及如何让应用，话不多说上代码💁🏻

offsetHeight： 它是包括padding、border、水平滚动条，但不包括margin的元素的高度。

⚠️：对于行内元素这个属性值一直是0，单位px，是只读元素。

scrollTop：表示在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度即“卷”起来的高度。

⚠️：在无滚动条时scrollTop==0恒成立，单位px，可读可设置。例如：“回滚到顶部”就可以用它来设置。

scrollHeight:当子元素比父元素高的时候，父元素不想被子元素撑高，于是出现了滚动条，在滚动的过程中子元素有部分会被隐藏掉，scrollHeight是 父元素高度offsetHeight + “卷”起来的高度 scrollTop，也可以理解为是子元素的offsetHeight值。



在了解了这三个属性的含义之后 理解触底就很简单了 其实就是 offsetHeight（显示区域高度） + scrollTop（卷起来的高度） - scrollHeight （子元素自身高度） >= -1 的时候就代表页面已经滑到底了～

接下来会有两种监听触底的案例：
1.div元素内内容触底

2.iframe内内容触底

 

我们先来看下第一种：div元素内内容触底

<div class="wrapper">
    <div class="content">
          独立寒秋，湘江北去，橘子洲头。
          看万山红遍，层林尽染；漫江碧透，百舸争流。
          鹰击长空，鱼翔浅底，万类霜天竞自由。
          怅寥廓，问苍茫大地，谁主沉浮？
          携来百侣曾游。忆往昔峥嵘岁月稠。
          恰同学少年，风华正茂；书生意气，挥斥方遒。
          ...
    <div>
</div>


<style>
.wrapper {
    margin: 0 auto;
    background: #fff;
    height: 100vh;
    overflow: hidden;
}
.wrapper-content {
    height: 100vh;
    overflow-y: scroll;
}
<style>


<script>
    export default {
        created() {
            this.$nextTick(() => {
                const el = document.querySelector('.content');
                const offsetHeight = el.offsetHeight;
                el.onscroll = () => {
                    const scrollTop = el.scrollTop;        
                    const scrollHeight = el.scrollHeight;
                    if (offsetHeight + scrollTop - scrollHeight >= -1) {
                        console.log("到达底部了")
                    }
                };
            });
        },
    }
<script>

 

第二种就是监听iframe内的滚动是否触底：

<style>
.wrapper {
    margin: 0 auto;
    background: #fff;
    height: 100vh;
    overflow: hidden;
}
.wrapper-content {
    height: 100vh;
    overflow-y: scroll;
}
<style>


<div class="wrapper">
    <iframe
      id="iframepage"
      src="XXX.html"
      frameborder="0"
      width="90%"
      class="content"
    ></iframe>
<div>


<script>
    export default {
        created() {
            this.$nextTick(() => { // iframe包裹
                const frameWindow = document.getElementById('iframepage').contentWindow;
                $(frameWindow).scroll(function () {
                    const ifm =frameWindow.document.documentElement;
                    const scrollHeight = ifm.scrollHeight;
                    const offsetHeight = frameWidow.innerHeight;
                    const scrollTop = frameWidow.document.body.scrollTop;
                    if (offsetHeight + scrollTop - scrollHeight >= -1) {
                        console.log("到底啦～")
                    }
                });
            });
        },
    }
<script>