目前上拉刷新,下拉加载,以及区域回弹的组件,绝大多数都是通过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端的上下滑动)的更多相关文章

  1. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  2. windows下更改鼠标滚轮方向

    本来鼠标滚轮的方向无所谓“正确”与否(win下和mac下方向相反),只要习惯即可.但从win下切换到mac后,本来是想把鼠标方向调成跟win下一致,结果这么一反转,连多指手势的“左右”都反了,苹果,算 ...

  3. 让鼠标滚轮在WINDOWS系统中也和MAC一样滚动(WIN系统鼠标滚轮反向)

    用习惯MAC系统偶尔要用用WINDOWS系统,或者由于各种原因总之时不时需要由MAC转向WIN系统或同时需要两个平台机器上倒腾来倒腾去的同学,一般来说最痛苦的就是鼠标滚轮方向不一致. 基本上我们知道苹 ...

  4. VC 鼠标滚轮事件控制绘图的问题

    问题描述: 在MFC中绘制数据曲线,通过鼠标滚轮来进行放大缩小操作.在使用滚轮事件时,发现如果数据量较大,会出现卡顿. 解决方案: 鼠标滚轮事件会进行重复绘图,考虑在鼠标滚轮结束之后再重绘: 在鼠标滚 ...

  5. jQuery 鼠标滚轮插件应用 mousewheel

    jQuery Mousewheel Plugin,用于添加跨浏览器的鼠标滚轮支持. mousewheel事件的处理函数有一点小小的变化,它除了第一个参数event 外,还接收到第二个参数delta. ...

  6. 鼠标滚轮事件MouseWheel

    其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox ...

  7. 鼠标滚轮(mousewheel)和DOMMouseScroll事件

    IE6.0首先实现了mousewheel事件.此后,Opera.Chrome和Safari也都实现了这个事件.当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时(无论向下还是向上),就会触发mous ...

  8. 在unity中用鼠标实现在场景中拖动物体,用鼠标滚轮实现缩放

    在场景中添加一个Plan,Camera,Directional Light,Cube.添加两个脚本scrollerScirpt(挂在Camera),CubeDragScript(挂在Cube上). 1 ...

  9. JavaScript中的鼠标滚轮事件详解

    JavaScript中的鼠标滚轮事件详解/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if ...

随机推荐

  1. wcf返回值报错解析

    问题来源 最近在项目中使用wcf,因为是一个新手,对新的东西总是比较敬畏,不过一切都是进行得很顺利,运行的时候,突然报了错,编译器提示的错误大概是:“InvalidOperationException ...

  2. 关于AOP的PIAB

    AOP:面向切面编程,也就是在运行过程中,按照需要动态加载功能块 PIAB:含义可以从下面提取 Microsoft Patterns & Practices团队在2007年发布的Enterpr ...

  3. flask开发微信公众号

    1.进入微信公众号首页,进行注册登录 https://mp.weixin.qq.com/ 2.进入个人首页,进行公众号设置 可参照 公众号文档 进行开发 开发前 先阅读 接口权限列表 3.配置服务器 ...

  4. java单例类的几种实现

    一,最简单的方式 public class Singleton{ private Singleton(){}; private static Singleton instance = new Sing ...

  5. Android:异步处理之Handler+Thread的应用(一)

    前言 很久很久以前就听说了,每一个android的应用程序都会分别运行在一个独立的dalvik虚拟机进程中,而在每个虚拟机在启动时会运行一个UI主线程(Main Thread),而为啥叫UI主线程而不 ...

  6. AutowireCapableBeanFactory源码详解

    一.概述 对于想要拥有自动装配能力,并且想要把这种能力暴露给外部应用BeanFactory类需要实现此接口. 正常情况下不要使用此接口,应该更倾向于使用BeanFactory或者ListableBea ...

  7. 如何精准实现OCR文字识别?

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由云计算基础发表于云+社区专栏 前言 2018年3月27日腾讯云云+社区联合腾讯云智能图像团队共同在客户群举办了腾讯云OCR文字识别-- ...

  8. C/C++编程GUI库比较

    转自:http://blog.csdn.net/lostown/article/details/658654 最强的GUI库当属Qt,毕竟是商业化的东西,功能最完整,什么都好,包括类似java代码风格 ...

  9. 下载imagenet2012数据集,以及label说明

    updated@2018-12-07 15:22:08 官方下载地址:http://www.image-net.org/challenges/LSVRC/2012/nonpub-downloads , ...

  10. C# Code First 配置

    前言 所谓code first,是代码优先,而不是传统的数据库优先. code first的好处多多,可不用考虑数据库,只考虑面向对象.下面我们介绍一下code first的配置. 下一篇文章地址:C ...