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

本文主要是介绍前端JS必用工具【js-tool-big-box】学习,获取当前浏览器向上滚动还是向下滚动,获取当前距离顶部和底部的距离,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

这一小节,我们说一下 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 方法,我们看一下浏览器的效果吧

 如上图中,我们将浏览器乡下滚动了一点点,滚动了67px的距离,这个时候,方法告诉我们是在乡下滚动,当前距离顶部是67px,距离最底部是 3324px。

我们再往上滚动一点点,方法告诉我们,当前浏览器是在向上滚动,距离顶部还有20px,距离底部还有3371px啦。

4 方法总结

方法名返回值入参

getScrollInfo

返回一个对象,对象的属性分别为:

scrollDirection,值为 down || up;

lastScrollTop,表示当前距离浏览器顶部的距离,最小为0;

scrollBottom,表示当前浏览器距离底部的距离,最小为0.

第一个参数为必填项,表示外部初始化的那个

lastScrollTop值,需要注意的是,每次方法使用完,都要给外部的这个lastScrollTop重新赋值,保持最新,然后再次使用的时候,再传进去,就像上面的实例代码一样

 

这篇关于前端JS必用工具【js-tool-big-box】学习,获取当前浏览器向上滚动还是向下滚动,获取当前距离顶部和底部的距离的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1051182

相关文章

Python办公自动化实战之打造智能邮件发送工具

《Python办公自动化实战之打造智能邮件发送工具》在数字化办公场景中,邮件自动化是提升工作效率的关键技能,本文将演示如何使用Python的smtplib和email库构建一个支持图文混排,多附件,多... 目录前言一、基础配置:搭建邮件发送框架1.1 邮箱服务准备1.2 核心库导入1.3 基础发送函数二、

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

Linux中压缩、网络传输与系统监控工具的使用完整指南

《Linux中压缩、网络传输与系统监控工具的使用完整指南》在Linux系统管理中,压缩与传输工具是数据备份和远程协作的桥梁,而系统监控工具则是保障服务器稳定运行的眼睛,下面小编就来和大家详细介绍一下它... 目录引言一、压缩与解压:数据存储与传输的优化核心1. zip/unzip:通用压缩格式的便捷操作2.

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机

sqlite3 命令行工具使用指南

《sqlite3命令行工具使用指南》本文系统介绍sqlite3CLI的启动、数据库操作、元数据查询、数据导入导出及输出格式化命令,涵盖文件管理、备份恢复、性能统计等实用功能,并说明命令分类、SQL语... 目录一、启动与退出二、数据库与文件操作三、元数据查询四、数据操作与导入导出五、查询输出格式化六、实用功

MySQL 获取字符串长度及注意事项

《MySQL获取字符串长度及注意事项》本文通过实例代码给大家介绍MySQL获取字符串长度及注意事项,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录mysql 获取字符串长度详解 核心长度函数对比⚠️ 六大关键注意事项1. 字符编码决定字节长度2

python3如何找到字典的下标index、获取list中指定元素的位置索引

《python3如何找到字典的下标index、获取list中指定元素的位置索引》:本文主要介绍python3如何找到字典的下标index、获取list中指定元素的位置索引问题,具有很好的参考价值,... 目录enumerate()找到字典的下标 index获取list中指定元素的位置索引总结enumerat

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)