当前位置：首页 > news >正文

前端JS必用工具【js-tool-big-box】学习，获取当前浏览器向上滚动还是向下滚动，获取当前距离顶部和底部的距离

news 来源：原创 2024/9/21 2:32:20

这一小节，我们说一下 js-tool-big-box 添加的最新工具方法，在日常前端开发工作中，如果网页很长，我们就需要获取当前浏览器是在向上滚动，还是向下滚动。如果向上滚动，滚动到0的时候呢，需要做一些操作；如果浏览器是在乡下滚动，如果滚动到底部有一定距离的时候呢，也需要做一些操作。例如距离底部还差200px的时候呢，我们就可以提前请求下一页数据拉，不至于滚动到0的时候再请求，那就会有点晚，让用户等很久。

1 安装和引入js-tool-big-box

执行安装命令

npm i js-tool-big-box

在项目中引入browserBox对象，判断浏览器滚动方向和距离的公共方法，在这个对象下面

import { browserBox } from 'js-tool-big-box';

2 使用准备

以vue项目为例，想要浏览器滚动，我们就需要预备很多元素，使网页过长；除此之外，我们需要准备一个初始化变量，这个变量用来获取当前浏览器距离顶部的距离，代码如下：

<template><div class="box-404"><p>js-tool-big-box</p><p>做功能更丰富的前端JS库</p><div class="box11">内容块1</div><div class="box11">内容块2</div><div class="box11">内容块3</div><div class="box11">内容块4</div><div class="box11">内容块5</div><div class="box11">内容块6</div><div class="box11">内容块7</div><div class="box11">内容块8</div><div class="box11">内容块9</div><div class="box11">内容块10</div><div class="box11">内容块11</div><div class="box11">内容块12</div><div class="box11">内容块13</div><div class="box11">内容块14</div><div class="box11">内容块15</div><div class="box11">内容块16</div><div class="box11">内容块17</div><div class="box11">内容块18</div><div class="box11">内容块19</div><div class="box11">内容块20</div><div class="box11">内容块21</div><div class="box11">内容块22</div><div class="box11">内容块23</div><div class="box11">内容块24</div><div class="box11">内容块25</div><div class="box11">内容块26</div><div class="box11">内容块27</div><div class="box11">内容块28</div><div class="box11">内容块29</div><div class="box11">内容块30</div><div class="box11">内容块31</div><div class="box11">内容块32</div><div class="box11">内容块33</div><div class="box11">内容块34</div><div class="box11">内容块35</div></div>
</template><script>
import { browserBox } from 'js-tool-big-box';export default {name: 'Page404',data () {return {val: '',lastScrollTop: 0, // 初始化滚动高度}},created() {},mounted() {window.addEventListener('scroll', this.handleScroll);},methods: {handleScroll() {},}
}
</script>

在以上代码中，我们初始化了很多 DIV 元素，用来生成滚动网页；

初始化了当前滚动高度，变量名为：lastScrollTop；

在 mounted 钩子函数中，添加了 scroll 滚动监听函数；

添加 handleScroll 函数，稍后使用

3 使用方法

methods: {handleScroll() {let lastScrollTop = this.lastScrollTop;let scrollInfo = browserBox.getScrollInfo(lastScrollTop);this.lastScrollTop = scrollInfo.lastScrollTop;console.log('检测滚动的对象信息：', scrollInfo);},}

在以上代码中，我们补齐了 handleScroll 函数，获取当前浏览器向上滚动，还是向下滚动的方法名是 getScrollInfo 方法，我们看一下浏览器的效果吧