vue 中判断向上滚动还是向下滚动
<script>
export default {
data(){
return{
i = 0
}
},
mounted () {
window.addEventListener('scroll', this.handleScroll, true);
// 监听(绑定)滚轮 滚动事件
},
methods:{
handleScroll(){
// 页面滚动距顶部距离
var scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
document.body.scrollTop
var scroll = scrollTop - this.i;
this.i = scrollTop;
if(scroll<0){
console.log('up')
}else{
console.log('down')
}
},
}
vue 中判断向上滚动还是向下滚动的更多相关文章
- JS判断鼠标向上滚动还是向下滚动
js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...
- js-scroll判断页面是向上滚动还是向下滚动
原理:那当前的scrollTop和之前的scrollTop对比 如果变大了,表示向下滚动(scrollTop值变大): 如果变小了,表示向上滚动(scrollTop值变小). 方法一:js代码: $( ...
- vue中判断页面滚动开始和结束
参考链接:https://www.jianshu.com/p/adad39705ced 和 https://blog.csdn.net/weixin_44309374/article/deta ...
- 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]
/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...
- C++中的向上类型转换和向下类型转换
在c++的世界中有这样两个概念,向上类型转换,向下类型转换,分别描述的是子类向基类,和基类向子类的强制类型转换. 向上强制类型转换 切割:覆盖方法和子类数据丢失的现象生成切割(slice) class ...
- Java中的向上转型和向下转型
首先要明白一点向上转型和向下转型他们都是建立在继承的基础上. 一.向上转型 子类到父类的转换通常称作向上转型,通俗的说就是定义父类对象指向子类对象. 下面通过一个例子来深入理解向上转型. //定义一个 ...
- 3.sql中的向上递归和向下递归
1.向下递归 select * from table_name where 条件 connect by prior bmbm(本级关联条件)=sjbmbm(上级关联条件) start with bmb ...
- jq判断鼠标滚轴向上滚动还是向下滚动
$(document).on("mousewheel DOMMouseScroll", function (e) { var delta = (e.originalEvent.wh ...
- Java中的向上造型和向下造型等
package com.study.oop.day01; /** * 如果某个方法是静态 的,它的行为就不具有多态性 * @author LuHongGang * @date 2017年6月5日 ...
随机推荐
- win7/win10 未分配磁盘怎样创建扩展分区 也就是逻辑分区(转截)
我们有时候用windows7的磁盘管理工具对windows7系统分区管理的时候,我们可能会不小心把我们的电脑硬盘扩展分区都删除了,扩展分区变为了未分配的空间,这时候如果我们新建分区的话,建立的都是主分 ...
- 爬虫工具--Beautifusoup
import requests from bs4 import BeautifulSoup s=requests.Session() r=s.get('https://www.tumblr.com/l ...
- mDNS 原理的简单理解
转自:http://www.binkery.com/post/318.html mDNS 原理的简单理解 mDNS multicast DNS , 使用5353端口. 在局域网内,你要通过一台主机和其 ...
- gud-cloud
架构:计算层:三台机器,包含处理器,内存条,外加一个64GB的存储器,这个存储器安装exsi主机,然后创建cvm虚拟机,硬盘空间选择在之前安装exsi主机的存储器里面 存储层:三台机器内置多个硬盘8T ...
- 运用cat EOF添加文件
[root@fyc14 nginx1]# cat <<EOF > /etc/yum.repos.d/nginx.repo> [nginx]> name=nginx rep ...
- ConcurrentHashMap 并发HashMap原理分析
ConcurrentHashMap和Hashtable主要区别就是围绕着锁的粒度以及如何锁.如图 左边便是Hashtable的实现方式---锁整个hash表:而右边则是Concurrent ...
- stylesheet_link_tag,javascript_include_tag无效?
stylesheet_link_tag,javascript_include_tag无效? http://stackoverflow.com/questions/28241981/rails-4-ex ...
- chrome打开网址但是没有地址栏
chrome打开网址但是没有地址栏 C:\Users\Administrator>C:\Users\Administrator\AppData\Local\Google\Chrome\Appli ...
- HDU 2196 Computer 树形DP经典题
链接:http://acm.hdu.edu.cn/showproblem.php? pid=2196 题意:每一个电脑都用线连接到了还有一台电脑,连接用的线有一定的长度,最后把全部电脑连成了一棵树,问 ...
- 石子合并(区间dp)
石子合并(一) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描写叙述 有N堆石子排成一排,每堆石子有一定的数量.现要将N堆石子并成为一堆.合并的过程仅仅能每次将相邻 ...