devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

js、react、vue里滚动到底部加载数据和滚动到顶部实现（js监听滚动事件，到底部请求接口）_js滚动条到最底下请求接口

作者：不正经 | 2024-06-10 21:59:24

赞

踩

js滚动条到最底下请求接口

前言：

最近在做一个项目，一个列表展示原本是分页器，点击下一页，请求接口。但是业务说需要改成滑倒底部，加载数据。

一、实现过程

整体思路就是 获取 滚动元素的 scrollHeight（元素内容的总高度）、clientHeight（元素的可见高度）、scrollTop（元素滚动条垂直滚动的距离）

  • scrollHeight表示元素内容的总高度，包括溢出部分；
  • clientHeight表示元素的可见高度，不包括滚动条、边框和外边距；
  • scrollTop表示元素滚动条垂直滚动的距离，即内容顶部相对于可见区域顶部的偏移量。

然后 在滚动事件里 判断 满足scrollTop+clientHeight >=scrollHeight  即可调用接口。

1.html+js
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  10. <style>
  11.     /* * {
  12.         padding: 0;
  13.         margin: 0;
  14.     } */
  15.  
  16.     ul>li {
  17.         width: 300px;
  18.         height: 100px;
  19.         list-style: none;
  20.         border: 1px solid red;
  21.         text-align: center;
  22.     }
  23.  
  24.     #btnTop {
  25.         position: fixed;
  26.         bottom: 50px;
  27.         right: 50px;
  28.     }
  29. </style>
  30.  
  31. <body>
  32.     <div class="a">
  33.         <ul id="box">
  34.  
  35.         </ul>
  36.         <div>
  37.             <button id="btnTop">滚动到顶部</button>
  38.         </div>
  39.     </div>
  40. </body>
  41. <script>
  42.     //获取滚动条被卷进去的高
  43.     function getScrollTop() {
  44.         var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
  45.         if (document.body) {
  46.             bodyScrollTop = document.body.scrollTop;
  47.         }
  48.         if (document.documentElement) {//兼容ie
  49.             documentScrollTop = document.documentElement.scrollTop;
  50.         }
  51.         scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
  52.         return scrollTop;
  53.     }
  54.     //获取可滚动高度
  55.     function getScrollHeight() {
  56.         var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
  57.         if (document.body) {
  58.             bodyScrollHeight = document.body.scrollHeight;
  59.         }
  60.         if (document.documentElement) {//兼容ie
  61.             documentScrollHeight = document.documentElement.scrollHeight;
  62.         }
  63.         scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
  64.         return scrollHeight;
  65.     }
  66.     //获取可见区域高
  67.     function getWindowHeight() {
  68.         var windowHeight = 0;
  69.         if (document.compatMode == "CSS1Compat") {//兼容ie
  70.             windowHeight = document.documentElement.clientHeight;
  71.         } else {
  72.             windowHeight = document.body.clientHeight;
  73.         }
  74.         return windowHeight;
  75.     }
  76.     function add(val) { //这里实际是请求接口比如到底部请求下一页接口
  77.         let box = document.getElementById('box');
  78.         for (var i = 0; i < val; i++) {
  79.             let li = document.createElement('li');
  80.             li.innerText = i;
  81.             box.appendChild(li)
  82.         }
  83.     }
  84.     add(10)
  85.     //事件监听
  86.     window.onscroll = function () {
  87.         //滚动条被卷进去的高+可见区域高=可滚动高度说明到底部了
  88.         console.log(getScrollTop() + getWindowHeight(), getScrollHeight())
  89.         //到底部请求接口 Math.round四舍五入因为太多位会导致精度缺失
  90.         if (Math.round(getScrollTop() + getWindowHeight()) >= getScrollHeight()) {
  91.             add(10)
  92.         }
  93.     };
  94.     let btn = document.getElementById('btnTop');
  95.     btn.onclick = function () { // 页面滚动到顶部
  96.     
  97.         // 方法一
  98.         document.body.scrollTop = document.documentElement.scrollTop = 0
  99.  
  100.         // 方法二
  101.         //document.body.scrollIntoView()
  102.         // scrollIntoView 是元素也有的方法, 可以用在页面元素上，例如
  103.         // document.getElementById('id').scrollIntoView()
  104.     }
  105. </script>
  106.  
  107. </html>
2.react实现
  1. import React, { Component } from 'react';
  2.  
  3. class Index extends Component {
  4.     constructor(props) {
  5.         super(props)
  6.         this.state = {
  7.             data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  8.         }
  9.     }
  10.     componentDidMount() {
  11.         window.addEventListener("scroll", this.add);//监听滚动事件
  12.     }
  13.     add = () => {
  14.         let { data, page } = this.state;
  15.         console.log(Math.round(this.getScrollTop() + this.getWindowHeight()), this.getScrollHeight())
  16.         if (Math.round(this.getScrollTop() + this.getWindowHeight()) >= this.getScrollHeight() - 1) {
  17.             //项目中在这里面请求接口
  18.             data.push(10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20);
  19.             this.setState({
  20.                 data
  21.             })
  22.         }
  23.  
  24.  
  25.     }
  26.     //获取滚动条被卷进去的高
  27.     getScrollTop = () => {
  28.         var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
  29.         if (document.body) {
  30.             bodyScrollTop = document.body.scrollTop;
  31.         }
  32.         if (document.documentElement) {//兼容ie
  33.             documentScrollTop = document.documentElement.scrollTop;
  34.         }
  35.         scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
  36.         return scrollTop;
  37.     }
  38.     //获取可滚动高度
  39.     getScrollHeight = () => {
  40.         var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
  41.         if (document.body) {
  42.             bodyScrollHeight = document.body.scrollHeight;
  43.         }
  44.         if (document.documentElement) {//兼容ie
  45.             documentScrollHeight = document.documentElement.scrollHeight;
  46.         }
  47.         scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
  48.         return scrollHeight;
  49.     }
  50.     //获取可见区域高
  51.     getWindowHeight = () => {
  52.         var windowHeight = 0;
  53.         if (document.compatMode == "CSS1Compat") {//兼容ie
  54.             windowHeight = document.documentElement.clientHeight;
  55.         } else {
  56.             windowHeight = document.body.clientHeight;
  57.         }
  58.         return windowHeight;
  59.     }
  60.     componentWillUnmount(){
  61.         window.removeEventListener("scroll",this.add);//销毁监听事件防止内存泄漏
  62.     }
  63.     render() {
  64.         let { data } = this.state;
  65.         return (
  66.             <div>
  67.                 <ul>
  68.                     {
  69.                         data.map((item, index) => {
  70.                             return (
  71.                                 <li style={{ height: "200px" }} key={index}>{item}</li>
  72.                             )
  73.                         })
  74.                     }
  75.                 </ul>
  76.             </div>
  77.         );
  78.     }
  79. }
  80.  
  81. export default Index
3.react升级版本 

 为什么升级呢，因为 我发现上一个版本不适合所有场景（基于body的）。上面的版本知识和 没有指定 滚动dom的情况。而大部分使用场景都是需要指定某个元素的。所以我做了改动，也就是这个版本更灵活。

1.class版本
  1. import React, { FC, useEffect, useRef, useState, Component } from 'react'
  2. import styles from './Home.module.less'
  3. class Home1 extends Component {
  4.   constructor(props) {
  5.     super(props)
  6.     this.state = {
  7.       data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  8.       dom: null
  9.     }
  10.   }
  11.   componentDidMount() {
  12.     let dom = document.getElementById("list-box");
  13.     dom.addEventListener("scroll", this.add);//监听滚动事件
  14.     this.setState({
  15.       dom
  16.     })
  17.   }
  18.   add = () => {
  19.     let { data, page } = this.state;
  20.     console.log(Math.round(this.getScrollTop() + this.getClientHeight()), this.getScrollHeight())
  21.     if (Math.round(this.getScrollTop() + this.getClientHeight()) >= this.getScrollHeight() - 1) {
  22.       //项目中在这里面请求接口
  23.       let arr=[10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
  24.       let data1 = data.concat(arr);
  25.       this.setState({
  26.         data: data1
  27.       })
  28.     }
  29.  
  30.  
  31.   }
  32.   //获取滚动条被卷进去的高
  33.   getScrollTop = () => {
  34.     const { dom } = this.state;
  35.     let scrollTop = 0;
  36.     if (typeof dom.scrollTop !== "undefined") {
  37.       // 如果浏览器支持直接获取scrollTop属性
  38.       scrollTop = dom.scrollTop;
  39.     } else if (typeof dom.pageYOffset !== "undefined") {
  40.       // 如果浏览器支持pageYOffset属性
  41.       scrollTop = dom.pageYOffset;
  42.     } else if (typeof dom.scrollY !== "undefined") {
  43.       // 如果浏览器支持scrollY属性
  44.       scrollTop = dom.scrollY;
  45.     } else if (typeof document.documentElement.scrollTop !== "undefined") {
  46.       // 兼容IE浏览器的获取scrollTop属性
  47.       scrollTop = document.documentElement.scrollTop;
  48.     } else if (typeof document.body.scrollTop !== "undefined") {
  49.       // 兼容IE浏览器的获取scrollTop属性
  50.       scrollTop = document.body.scrollTop;
  51.     }
  52.     return scrollTop;
  53.   }
  54.   //获取可滚动高度
  55.   getScrollHeight = () => {
  56.     const { dom } = this.state;
  57.     var scrollHeight = 0;
  58.     if (typeof dom.scrollHeight !== "undefined") {
  59.       // 如果浏览器支持直接获取scrollHeight属性
  60.       scrollHeight = dom.scrollHeight;
  61.     } else if (typeof dom.offsetHeight !== "undefined") {
  62.       // 如果浏览器支持offsetHeight属性
  63.       scrollHeight = dom.offsetHeight;
  64.     } else if (typeof dom.clientHeight !== "undefined") {
  65.       // 如果浏览器支持clientHeight属性
  66.       scrollHeight = dom.clientHeight;
  67.     }
  68.     return scrollHeight;
  69.  
  70.   }
  71.   //获取可见区域高
  72.   getClientHeight = () => {
  73.     const { dom } = this.state;
  74.     var clientHeight = 0;
  75.     if (typeof dom.clientHeight !== "undefined") {
  76.       // 如果浏览器支持直接获取clientHeight属性
  77.       clientHeight = dom.clientHeight;
  78.     } else if (typeof dom.offsetHeight !== "undefined") {
  79.       // 如果浏览器支持offsetHeight属性
  80.       clientHeight = dom.offsetHeight;
  81.     }
  82.     return clientHeight;
  83.   }
  84.   componentWillUnmount() {
  85.     const { dom } = this.state;
  86.     dom.removeEventListener("scroll", this.add);//销毁监听事件防止内存泄漏
  87.   }
  88.   render() {
  89.     let { data } = this.state;
  90.     return (
  91.       <div>
  92.         <ul className={styles.listBox} id='list-box'>
  93.           {
  94.             data.map((item, index) => {
  95.               return (
  96.                 <li className={styles.listItem} key={index}>{item}</li>
  97.               )
  98.             })
  99.           }
  100.         </ul>
  101.       </div>
  102.     );
  103.   }
  104. }
  105.  
  106. export default Home1;

样式：

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5.  
  6. .listBox {
  7.     width: 300px;
  8.     height: 800px;
  9.     border: 1px solid red;
  10.     overflow: auto;
  11.  
  12. }
  13.  
  14. .listItem {
  15.     width: 100%;
  16.     height: 80px;
  17.     border-bottom: 1px solid blue;
  18. }

 

2.hook版本
  1. import React, { FC, useEffect, useRef, useState, Component } from 'react'
  2. import styles from './Home.module.less'
  3. const Home1 = () => {
  4.   const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
  5.   
  6.  
  7.   useEffect(() => {
  8.     let dom = document.getElementById("list-box");
  9.     dom.addEventListener("scroll", add);//监听滚动事件
  10.     return () => {
  11.       // 组件卸载时，移除滚动事件监听器
  12.       dom.removeEventListener('scroll', add);
  13.     };
  14.   }, [])
  15.   
  16.  
  17.  
  18.   const add = () => {
  19.     //console.log(Math.round(getScrollTop() + getClientHeight()), getScrollHeight())
  20.     if (Math.round(getScrollTop() + getClientHeight()) >= getScrollHeight()-1) {
  21.       //项目中在这里面请求接口
  22.       let data1 = data.push(10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20);
  23.       setData(prevData => prevData.concat(data1));
  24.     }
  25.  
  26.  
  27.   }
  28.  
  29.   //获取滚动条被卷进去的高
  30.   const getScrollTop = () => {
  31.     let dom = document.getElementById("list-box");
  32.     let scrollTop = 0;
  33.     if (typeof dom.scrollTop !== "undefined") {
  34.       // 如果浏览器支持直接获取scrollTop属性
  35.       scrollTop = dom.scrollTop;
  36.     } else if (typeof dom.pageYOffset !== "undefined") {
  37.       // 如果浏览器支持pageYOffset属性
  38.       scrollTop = dom.pageYOffset;
  39.     } else if (typeof dom.scrollY !== "undefined") {
  40.       // 如果浏览器支持scrollY属性
  41.       scrollTop = dom.scrollY;
  42.     } else if (typeof document.documentElement.scrollTop !== "undefined") {
  43.       // 兼容IE浏览器的获取scrollTop属性
  44.       scrollTop = document.documentElement.scrollTop;
  45.     } else if (typeof document.body.scrollTop !== "undefined") {
  46.       // 兼容IE浏览器的获取scrollTop属性
  47.       scrollTop = document.body.scrollTop;
  48.     }
  49.     return scrollTop;
  50.   }
  51.   //获取可滚动高度
  52.   const getScrollHeight = () => {
  53.     let dom = document.getElementById("list-box");
  54.     var scrollHeight = 0;
  55.     if (typeof dom.scrollHeight !== "undefined") {
  56.       // 如果浏览器支持直接获取scrollHeight属性
  57.       scrollHeight = dom.scrollHeight;
  58.     } else if (typeof dom.offsetHeight !== "undefined") {
  59.       // 如果浏览器支持offsetHeight属性
  60.       scrollHeight = dom.offsetHeight;
  61.     } else if (typeof dom.clientHeight !== "undefined") {
  62.       // 如果浏览器支持clientHeight属性
  63.       scrollHeight = dom.clientHeight;
  64.     }
  65.     return scrollHeight;
  66.  
  67.   }
  68.   //获取可见区域高
  69.   const getClientHeight = () => {
  70.     let dom = document.getElementById("list-box");
  71.     var clientHeight = 0;
  72.     if (typeof dom.clientHeight !== "undefined") {
  73.       // 如果浏览器支持直接获取clientHeight属性
  74.       clientHeight = dom.clientHeight;
  75.     } else if (typeof dom.offsetHeight !== "undefined") {
  76.       // 如果浏览器支持offsetHeight属性
  77.       clientHeight = dom.offsetHeight;
  78.     }
  79.     return clientHeight;
  80.   }
  81.  
  82.   return (
  83.     <div>
  84.       <ul className={styles.listBox} id='list-box'>
  85.         {
  86.           data.map((item, index) => {
  87.             return (
  88.               <li className={styles.listItem} key={index}>{item}</li>
  89.             )
  90.           })
  91.         }
  92.       </ul>
  93.     </div>
  94.   )
  95. }
  96. export default Home1;

   样式：

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5.  
  6. .listBox {
  7.     width: 300px;
  8.     height: 800px;
  9.     border: 1px solid red;
  10.     overflow: auto;
  11.  
  12. }
  13.  
  14. .listItem {
  15.     width: 100%;
  16.     height: 80px;
  17.     border-bottom: 1px solid blue;
  18. }
4.vue里

vue里 以上代码理论上也能使用，把函数放到 methods里 变量放到data里（vue2）。

vue3的话就按照 ref写响应式变量，const 写函数。

如果 documnet.getxx不好用可以使用 vue 里的ref ，react同理。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/700529
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号