前端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重新赋值,保持最新,然后再次使用的时候,再传进去,就像上面的实例代码一样

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux网络命令——netstat

netstat是Linux系统中非常有用的网络工具&#xff0c;被称为是网络监控中的军工刀&#xff0c;足见其地位。 传统上&#xff0c;它用于问题确定而不是性能测量&#xff0c;但是也可用于查看网络上的流量&#xff0c;以确定性能问题是否由于网络阻塞引起。 netstat用于显示与I…

建筑二建考试试题及答案,分享几个实用搜题和学习工具 #微信#经验分享

大学生必备的搜题工具&#xff0c;专业课本习题、电子版教材、考研资料、英语四六级等考试题目也能一并搜索&#xff0c;每道题目都有详细的讲解&#xff0c;每个都堪称大学神器。 1.掌上识别王 一个可以快速纸质书籍上内容扫描成电子档的工具&#xff0c;为了方便大家快速搜…

好用的Web数据库管理工具SQLynx

SQLynx 是一款功能强大且用户友好的 Web 数据库管理工具&#xff0c;原生支持个人和企业用户&#xff0c;专为简化数据库管理和操作而设计。 目录 1 主要特点 2 优势 3 典型使用场景 4 示例 5 结论 SQLynx原名SQL Studio&#xff0c;产品100%自主研发&#xff0c;无任何开…

OSI七层网络参考模型

一、物理层 我们要发送出去的数据在计算机里只不过是无数的0和1&#xff0c;0或1就叫做比特&#xff0c;物理层就是把这些比特用不同的媒介传输出去&#xff0c;可以用电、光或者其他形式的电磁波来表示和传输信号&#xff0c;数据从网络接口出去以后&#xff0c;会经过不同的网…

dat.gui图形用户页面

一、导入 1.npm安装 npm install --save dat.gui 引入&#xff1a; // CommonJS: const dat require(dat.gui); // ES6: import * as dat from dat.gui; const gui new dat.GUI(); 二、控制器 <!DOCTYPE html> <html lang"en"> <head><…

【重磅开源】MapleBoot权限控制使用介绍(菜单权限、按钮权限、数据权限)

基于SpringBootVue3开发的轻量级快速开发脚手架 ## &#x1f341;项目简介 一个通用的前、后端项目模板 一个快速开发管理系统的项目 一个可以生成SpringBootVue代码的项目 一个持续迭代的开源项目 一个程序员的心血合集 度过严寒&#xff0c;终有春日&#…

Spring (50)Ribbon

Netflix Ribbon是一个客户端负载均衡器&#xff0c;它提供了一系列完善的配置项&#xff1a;如连接超时、重试、负载均衡策略等。在微服务架构中&#xff0c;Ribbon通常被用于调用其它服务&#xff0c;通过负载均衡选择一个最佳的服务实例进行交互。Spring Cloud将Ribbon整合在…

【深度学习】Loss为Nan的可能原因

文章目录 1. 问题情境2. 原因分析3. 导致Loss为Nan的其他可能原因 1. 问题情境 在某个网络架构下&#xff0c;我为某个数据项引入了一个损失函数。 这个数据项是nn.Embedding类型的&#xff0c;我加入的损失函数是对nn.Embedding空间做约束。 因为我在没加入优化loss前&#x…

C# WPF入门学习主线篇(八)—— ListBox常见属性和事件

C# WPF入门学习主线篇&#xff08;八&#xff09;—— ListBox常见属性和事件 欢迎来到C# WPF入门学习系列的第八篇。在前面的文章中&#xff0c;我们已经探讨了WPF中的Button、TextBox和Label控件的使用。今天&#xff0c;我们将深入了解WPF中的另一个常用控件——ListBox。本…

GPS原理与接收机设计

将伪码中的一位二进制数称为一个码片&#xff0c;或者称为一个码元&#xff0c;一个码片的持续时间称为码宽&#xff0c;单位时间内所包含的码片数目称为码率。 GPS信号中的C/A码属于金码&#xff0c;能产生金码的一对m序列称为优选m序列对。通过调节其中一个m序列的延时&…

Pulsar 社区周报 | No.2024-06-07 | Apache Pulsar 新分支 3.3 版本发布

“ 各位热爱 Pulsar 的小伙伴们&#xff0c;Pulsar 社区周报更新啦&#xff01;这里将记录 Pulsar 社区每周的重要更新&#xff0c;每周发布。 ” 本期主题&#xff1a;Apache Pulsar 新分支 3.3 版本发布 Apache Pulsar 新分支 3.3 版本发布&#xff1a;Apache Pulsar 3.3.0[1…

必备:产品经理工作文档大全

产品经理&#xff08;英文&#xff1a;Product manager&#xff0c;缩写&#xff1a;PM&#xff09;也称产品企划&#xff0c;是指在公司中针对某项或某类的产品进行规划和管理的人员&#xff0c;主要负责产品的研发、制造、营销、渠道等工作。 产品经理是很难定义的一个角色&a…

DeepSORT(目标跟踪算法)中的数值表格与调参的关系

DeepSORT&#xff08;目标跟踪算法&#xff09;中的数值表格与调参的关系 flyfish DeepSORT&#xff08;目标跟踪算法&#xff09;中的马氏距离详解&#xff08;很详细&#xff09; DeepSORT&#xff08;目标跟踪算法&#xff09;中 可以设置阈值进行异常检测或目标跟踪的原…

在Ubuntu20.04上安装Apache、MySQL和PHP的基本步骤

1安装Apache&#xff1a; sudo apt update sudo apt install apache2 2安装MySQL&#xff1a; sudo apt install mysql-server 3安装PHP以及常用扩展&#xff1a; sudo apt install php libapache2-mod-php php-mysql 4配置Apache和PHP&#xff1a; sudo nano /etc/apac…

问题:在信息点统计表中,对于没有信息点的工作区或者房间填写,表明已经分析过该区域 #微信#职场发展#职场发展

问题&#xff1a;在信息点统计表中,对于没有信息点的工作区或者房间填写,表明已经分析过该区域 参考答案如图所示

vue面试题五

一、请解释Vue中的keep-alive组件是什么&#xff0c;以及它的作用&#xff1f; Vue中的keep-alive是一个内置组件&#xff0c;它主要的作用是在组件切换过程中将状态保留在内存中&#xff0c;以防止重复渲染DOM&#xff0c;从而提高页面性能。keep-alive包裹动态组件时&#x…

学历还算能力的一部分吗(机器人方向)

前篇 在人工智能时代&#xff0c;学历还算是能力的一部分吗&#xff1f; 之前写过一篇&#xff0c;现在感觉应该是不严谨&#xff0c;不准确的。 AI如何看待能力&#xff0c;学历&#xff0c;文凭-CSDN博客 那一篇讨论了&#xff1a;{文凭}⊂{学历}⊂{能力} 本篇 不合格且…

PAT 1061 Dating(20分)未完成

原题链接&#xff1a;PAT 1061 Dating&#xff08;20分&#xff09; Sherlock Holmes received a note with some strange strings: Lets date! 3485djDkxh4hhGE 2984akDfkkkkggEdsb s&hgsfdk d&Hyscvnm. It took him only a minute to figure out that those strange…

【Echarts系列】带图片的饼图

【Echarts系列】带图片的饼图 序前提说明示例数据格式代码动态旋转图片 序 为了节省后续开发学习成本&#xff0c;这个系列将记录我工作所用到的一些echarts图表。 前提说明 因为饼图中间需要添加图片&#xff0c;所以比较特殊&#xff0c;对于饼图中间数据的对齐很容易出现…

正大国际期货:原油投资出现亏损的五种心理弱点

在原油投资当中&#xff0c;有五种心理弱点最容易导致投资者失败&#xff0c;必须注意加以克服! 盲目胆大心理。 有些投资者从未认真系统地学习过投资理论技巧&#xff0c;也没有经过任何模拟训练&#xff0c;甚至连最起码的投资基础知识都不明白&#xff0c;就贸然的进入原油…