阿里巴巴企业网站怎么做,巩义网站优化,建好的网站在哪里,一个网站一年要多少钱这一小节#xff0c;我们说一下 js-tool-big-box 添加的最新工具方法#xff0c;在日常前端开发工作中#xff0c;如果网页很长#xff0c;我们就需要获取当前浏览器是在向上滚动#xff0c;还是向下滚动。如果向上滚动#xff0c;滚动到0的时候呢#xff0c;需要做一些…这一小节我们说一下 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项目为例想要浏览器滚动我们就需要预备很多元素使网页过长除此之外我们需要准备一个初始化变量这个变量用来获取当前浏览器距离顶部的距离代码如下
templatediv classbox-404pjs-tool-big-box/pp做功能更丰富的前端JS库/pdiv classbox11内容块1/divdiv classbox11内容块2/divdiv classbox11内容块3/divdiv classbox11内容块4/divdiv classbox11内容块5/divdiv classbox11内容块6/divdiv classbox11内容块7/divdiv classbox11内容块8/divdiv classbox11内容块9/divdiv classbox11内容块10/divdiv classbox11内容块11/divdiv classbox11内容块12/divdiv classbox11内容块13/divdiv classbox11内容块14/divdiv classbox11内容块15/divdiv classbox11内容块16/divdiv classbox11内容块17/divdiv classbox11内容块18/divdiv classbox11内容块19/divdiv classbox11内容块20/divdiv classbox11内容块21/divdiv classbox11内容块22/divdiv classbox11内容块23/divdiv classbox11内容块24/divdiv classbox11内容块25/divdiv classbox11内容块26/divdiv classbox11内容块27/divdiv classbox11内容块28/divdiv classbox11内容块29/divdiv classbox11内容块30/divdiv classbox11内容块31/divdiv classbox11内容块32/divdiv classbox11内容块33/divdiv classbox11内容块34/divdiv classbox11内容块35/div/div
/templatescript
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重新赋值保持最新然后再次使用的时候再传进去就像上面的实例代码一样
