前置知识

先来理解DOM元素的三个属性

  • scrollTop: 元素顶部到元素可视区域顶部的像素距离（可读写）
  • clientHeight: 元素的像素高度，包括盒子内容content和内边距padding, 不包括边框外边距和水平滚动条（只读）
  • scrollHeight: 类似于clientHeight，但包括由于overflow属性不可见内容的高度。

三者的关系如下图所示：绿色部分是滚动元素能看到的部分，假设红色框区域是元素的总高度，部分被隐藏
scrollTop.png

如何判断

MDN上有一条公式，用于判断元素是否滚动到底部
image.png
结合前面的示意图可知，元素滚动到底部的条件是scrollTop + clientHeight === scrollHeight

Vue写法

以Vue举例，只需监听scroll事件获取到scrollTop, clientHeight 和 scrollHeight的值再进行判断，就能知道元素是否滚动到底部。

  1. <template>
  2.   <div id="app">
  3.     <div class="scroll-view"
  4.          ref="scrollView"
  5.          id="scroll-view"
  6.          @scroll="handleScroll">
  7.       <div
  8.           v-for="(item, index) in list"
  9.           :key="index"
  10.           class="list-item">
  11.         列表项{{item}}
  12.       </div>
  13.     </div>
  14.   </div>
  15. </template>
  16. <script>
  18. export default {
  19.   name: 'HelloWorld',
  20.   data() {
  21.     return {
  22.       list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  23.     };
  24.   },
  25.   mounted() {
  26.     this.$nextTick(() => {
  27.       console.log('clientHeight', this.$refs.scrollView.clientHeight)
  28.     })
  29.   },
  30.   methods: {
  31.     handleScroll(e) {
  32.       const {scrollTop, clientHeight, scrollHeight} = e.target
  33.       // console.log(scrollTop, clientHeight, scrollHeight)
  34.       if (scrollTop + clientHeight === scrollHeight){
  35.         alert('滚动到底部啦')
  36.       }
  37.     }
  38.   }
  39. }
  40. </script>
  41. <style scoped>
  42. .scroll-view {
  43.   width: 400px;
  44.   height: 300px;
  45.   overflow-y: scroll;
  46.   background-color: #68b687;
  47. }
  49. .list-item {
  50.   padding: 40px 0;
  51. }
  53. .list-item:nth-child(2n + 1){
  54.   background-color: rgba(0, 0, 0, .2);
  55. }
  57. .list-item:nth-child(2n + 2){
  58.   background-color: rgba(222, 221, 221, 0.2);
  59. }
  60. </style>

效果演示

scrollToBottom.gif

参考

https://www.cnblogs.com/weiyf/p/8718051.html
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop
https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight