<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 中判断向上滚动还是向下滚动的更多相关文章

  1. JS判断鼠标向上滚动还是向下滚动

    js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...

  2. js-scroll判断页面是向上滚动还是向下滚动

    原理:那当前的scrollTop和之前的scrollTop对比 如果变大了,表示向下滚动(scrollTop值变大): 如果变小了,表示向上滚动(scrollTop值变小). 方法一:js代码: $( ...

  3. vue中判断页面滚动开始和结束

    参考链接:https://www.jianshu.com/p/adad39705ced    和  https://blog.csdn.net/weixin_44309374/article/deta ...

  4. 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]

    /**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...

  5. C++中的向上类型转换和向下类型转换

    在c++的世界中有这样两个概念,向上类型转换,向下类型转换,分别描述的是子类向基类,和基类向子类的强制类型转换. 向上强制类型转换 切割:覆盖方法和子类数据丢失的现象生成切割(slice) class ...

  6. Java中的向上转型和向下转型

    首先要明白一点向上转型和向下转型他们都是建立在继承的基础上. 一.向上转型 子类到父类的转换通常称作向上转型,通俗的说就是定义父类对象指向子类对象. 下面通过一个例子来深入理解向上转型. //定义一个 ...

  7. 3.sql中的向上递归和向下递归

    1.向下递归 select * from table_name where 条件 connect by prior bmbm(本级关联条件)=sjbmbm(上级关联条件) start with bmb ...

  8. jq判断鼠标滚轴向上滚动还是向下滚动

    $(document).on("mousewheel DOMMouseScroll", function (e) { var delta = (e.originalEvent.wh ...

  9. Java中的向上造型和向下造型等

    package com.study.oop.day01; /**  * 如果某个方法是静态 的,它的行为就不具有多态性  * @author LuHongGang  * @date 2017年6月5日 ...

随机推荐

  1. 【转】Oracle基础结构认知——oracle内存结构 礼记八目 2017-12-15 20:31:27

    oracle的数据库实例是一组后台进程和内存结构组成的,而内存结构由系统全局区(system global area)和程序全局区(program global area)组成. #修改SGA和PGA ...

  2. React重点概要

    JSX语法: 1.ReactDOM.render:用于将模板转换为HTML语言,并插入指定的DOM节点: 语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析,HTML 语言 ...

  3. 【转】DBSCAN密度聚类算法

    DBSCAN(Density-Based Spatial Clustering of Applications with Noise,具有噪声的基于密度的聚类方法)是一种很典型的密度聚类算法,和K-M ...

  4. ASP组件AspJpeg(加水印)生成缩略图等使用方法

    ASP组件AspJpeg(加水印)生成缩略图等使用方法 作者: 字体:[增加 减小] 类型:转载 时间:2012-12-17我要评论 ASPJPEG是一款功能相当强大的图象处理组件,用它可以轻松地做出 ...

  5. Java web课程学习之Servlet

    Servlet简介   (1) Servlet本质上就是一个Java类,只不过运行在Servlet容器中 (2) Servlet的功能: ① 创建并返回客户请求的动态HTML页面 ② 创建可嵌入到现有 ...

  6. UVALive-8138 Number Generator 概率dp+优化

    题目链接:https://cn.vjudge.net/problem/UVALive-8138 题意 有一个随机数生成器,输出1-n的整数. 现在已经输出了k个数,问再取几个数才能使取出的所有数的个数 ...

  7. 《你又怎么了我错了行了吧》【Alpha】Scrum meeting 4

    第四天 日期:2019/6/17 前言: 第4次会议在女生宿舍召开 对前面的系统改进有了方向,讨论了代码编写的分配问题 1.1 今日完成任务情况以及明天任务安排 姓名 当前阶段任务 下一阶段任务 刘 ...

  8. FansUnion:共同写博客计划终究还是“流产”了

    首先说说我原本的计划:我和周围的同学.朋友.好友 共同维护一个博客. 我对其他人并没有过高的期待.我一个人的写作量 = 其他人的写作量. 现实是,其他人没有怎么写. 对于,这个结果,我非常低无奈.谩骂 ...

  9. Tensorboard服务激活

    首先确定Tensorflow的具体位置(在Dos环境下,也就是cmd) cd .. cd scripts conda env list activate tensorflow tensorboard ...

  10. 关于struts值栈的总结,前端页面如何使用标签取得值栈中的数据

    用户提交一次请求的执行过程 总结: struts值栈中 两个内容 一个是栈 一个是map 值栈(数据中心)的范围是一个请求 它代替了request作用域 struts自定义标签有一个特点 比如遍历集合 ...