鼠标滚轮更改transform的值(vue-scroller在PC端的上下滑动)
目前上拉刷新,下拉加载,以及区域回弹的组件,绝大多数都是通过transform去实现的。在移动端效果很好,但是PC端使用鼠标拖拽的方式,查看下文首先不符合逻辑,其次容易点进其他页面。
起初,项目的初衷是在微信浏览器中查看,但是客户反应有些页面pc端没办法上下滑动(使用了vue-scroller的页面都跪了)。鼠标滚轮默认控制的是滚动条,不是容器的transform属性,怎么可能上下滑动。
然后就想如果能监听到鼠标滚轮事件,然后再更改transform:translate3d(x,y,z),这样不就可以实现pc端vue-scroller的滚动了吗;度娘了一下,还真有鼠标滚轮事件,叫做mousewheel,这货可是原生JS的事件,jquery-free的同学,可以大胆使用。不过比较坑的是这个事件比较冷门,一般没人用,所以官方文档也不详细。
window.onmousewheel = function (e) {
if(e.wheelDelta<0){
}else{
}
}
这个事件包含了一个鼠标事件所没有的属性,wheelDelta,这个属性值始终是120的倍数,而且向上滑动一单位,wheelDelta值为120的倍数,向下为-120的倍数。
下文是vue-scroller在pc端的处理
let _this = this;//此this指向的是vue
window.onmousewheel = function (e) {
if(e.wheelDelta<0){
_this.$refs.scrollerBottom && (_this.$refs.scrollerBottom.scrollBy(0, 30, false));//避免ref中不存在scrollerBottom
}else{
_this.$refs.scrollerBottom && (_this.$refs.scrollerBottom.scrollBy(0, -30, false));
}
}
vue-scroller中scrollBy和scrollTo的区别就不细讲了,scrollTo就是把View移动到屏幕的X和Y位置,也就是绝对位置。而scrollBy则是相对位置。
很简单的就实现了vue-scroller在pc端的上下滑动。(通过触摸板滚动,其实也是调用onmousewheel)
鼠标滚轮更改transform的值(vue-scroller在PC端的上下滑动)的更多相关文章
- js中鼠标滚轮事件详解
js中鼠标滚轮事件详解 (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...
- windows下更改鼠标滚轮方向
本来鼠标滚轮的方向无所谓“正确”与否(win下和mac下方向相反),只要习惯即可.但从win下切换到mac后,本来是想把鼠标方向调成跟win下一致,结果这么一反转,连多指手势的“左右”都反了,苹果,算 ...
- 让鼠标滚轮在WINDOWS系统中也和MAC一样滚动(WIN系统鼠标滚轮反向)
用习惯MAC系统偶尔要用用WINDOWS系统,或者由于各种原因总之时不时需要由MAC转向WIN系统或同时需要两个平台机器上倒腾来倒腾去的同学,一般来说最痛苦的就是鼠标滚轮方向不一致. 基本上我们知道苹 ...
- VC 鼠标滚轮事件控制绘图的问题
问题描述: 在MFC中绘制数据曲线,通过鼠标滚轮来进行放大缩小操作.在使用滚轮事件时,发现如果数据量较大,会出现卡顿. 解决方案: 鼠标滚轮事件会进行重复绘图,考虑在鼠标滚轮结束之后再重绘: 在鼠标滚 ...
- jQuery 鼠标滚轮插件应用 mousewheel
jQuery Mousewheel Plugin,用于添加跨浏览器的鼠标滚轮支持. mousewheel事件的处理函数有一点小小的变化,它除了第一个参数event 外,还接收到第二个参数delta. ...
- 鼠标滚轮事件MouseWheel
其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox ...
- 鼠标滚轮(mousewheel)和DOMMouseScroll事件
IE6.0首先实现了mousewheel事件.此后,Opera.Chrome和Safari也都实现了这个事件.当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时(无论向下还是向上),就会触发mous ...
- 在unity中用鼠标实现在场景中拖动物体,用鼠标滚轮实现缩放
在场景中添加一个Plan,Camera,Directional Light,Cube.添加两个脚本scrollerScirpt(挂在Camera),CubeDragScript(挂在Cube上). 1 ...
- JavaScript中的鼠标滚轮事件详解
JavaScript中的鼠标滚轮事件详解/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if ...
随机推荐
- nginx官方文档 之 http负载均衡 学习笔记
一.负载均衡 算法 大致可以分两类: (1)不能保证用户的每一次请求都通过负载均衡到达同一服务器. (2)可保证用户的每一次请求都通过负载均衡到达同一服务器. 第二类的应用场景: 1.如果服务器有缓存 ...
- IIS:IIS 8.5下设置404错误页
IIS版本:IIS 8.5 问题描述 搭建一个测试网站,总共就2个页面(index.php和404.php),默认首页为:index.php 当访问index.php和404.php的时候,IIS服务 ...
- 【Canal源码分析】TableMetaTSDB
这是Canal在新版本引入的一个内容,主要是为了解决由于历史的DDL导致表结构与现有表结构不一致,导致的同步失败的问题.采用的是Druid和Fastsql,来记录表结构到DB中,如果需要进行回滚时,得 ...
- print默认在末尾添加一个换行符,但其实也可以不用!
白月黑羽今天给大家分享另外一个冷知识:) python中 print函数打印信息时默认添加一个换行符,所以你看到一条print语句,则单独占一行,那是否可以不要换行符呢? 答案是肯定的,当然可以,可用 ...
- javascript实现代码高亮-wangHighLighter.js
1. 引言 (先贴出wangHighLighter.js的github地址:https://github.com/wangfupeng1988/wangHighLighter注意,程序和使用说明的更新 ...
- 交换排序:冒泡排序vs快速排序
在开发的过程中, 经常会遇到集合排序, 那么一般情况下, 我们都是使用list.OrderBy()的方式来排序, 也无需关注到里面算法的实现是个什么样子. 正好这几天准备回顾一下数据结构与算法. 首先 ...
- Redis开发与运维
常用命令 redis-server启动redis redis-server /opt/redis/redis.conf 配置启动 redis-server --port 6379 --dir / ...
- Leetcode 759. Employee Free Time
思路:区域覆盖问题.一个自然的想法是将每个员工的工作时间段看做一个木棒,每个木棒的长度就是这个时间段的时长.然后按照木棒的起始位置升序排列,接着由低位置向高位置一个木棒一个木棒的看过去.如果当前木棒的 ...
- centos7之使用最新版的kubeadm体验k8s1.12.0
1.环境准备 centos7 .docker-ce18.06.1-ce.kubeadm.kubelet.kubectl 2.安装 yum安装,准备repo文件 docker: [docker-ce-s ...
- 数字三角形 (简单DP)
问题描述 小Hi和小Ho在经历了螃蟹先生的任务之后被奖励了一次出国旅游的机会,于是他们来到了大洋彼岸的美国.美国人民的生活非常有意思,经常会有形形色色.奇奇怪怪的活动举办,这不,小Hi和小Ho刚刚下飞 ...