java 不让滚动条随着拖拽滑动_「最近项目小结」使用Vue实现一个简单的鼠标拖拽滚动效果插件...
演示事例
http://www.longstudy.club/vue-drag-scroll/index.html
最近在做一个新的项目,有个需求是这样的:
简单描述一下,就是鼠标拖动页面,整个页面会随着的鼠标的拖拽而移动,如果页面有内容,里面的内容也需要跟着拖动的外层整体移动。
一开始没啥思路,所以就发了个朋友圈,得到的答案挺多的,主要还是用拖拽之类的,但这个拖拽只是单个元素的拖动,我想要的整个视图的拖动。
这里线索又断了。
于是又回到飞书有类似功能的页面,然后仔细检查一下它页面的 DOM 结构,如下所示:
发现有这一层,它把页面设置的很宽,很高,为了隐藏滚动条,所以设置overflow: hidden;,看了这一设置,突然灵光一现,难道它是用拖拽来触发滚动条的滚动,在细想,哇靠,这思路可行的,NB。
准备上手试试
创建一个 vue 项目,这个就不细说的,我已经把原码发布到 github 上了,有兴趣自己看看:
https://github.com/qq449245884/vue-drag-scroll
首先给外层加个大大的宽和高:
// 这里省略一些不太重要的代码
这里设置了一个计算属性 zoomStye,主要使用就是给外层加一个大的宽,和高,这里我还设置了一个缩放比较,为了是能放大缩小页面,下面讲。运行效果:
接着,我们需要监听鼠标的拖拽来触发滚动条效果,因为需要对 dom 的操作,所以这里把拖拽处理逻辑用 vue 指令封装起来,这样后面有需要,只要使用该指令即可。
注意:在 vue 中如果需要对 dom 进行多次操作,最好是把它封装在指令中。
指令代码如下:
import Vue from 'vue'Vue.directive('dragscroll', function (el) { el.onmousedown = function (ev) { console.log(el) const disX = ev.clientX const disY = ev.clientY const originalScrollLeft = el.scrollLeft const originalScrollTop = el.scrollTop const originalScrollBehavior = el.style['scroll-behavior'] const originalPointerEvents = el.style['pointer-events'] // auto: 默认值,表示滚动框立即滚动到指定位置。 el.style['scroll-behavior'] = 'auto' el.style['cursor'] = 'grabbing' // 鼠标移动事件是监听的整个document,这样可以使鼠标能够在元素外部移动的时候也能实现拖动 document.onmousemove = function (ev) { ev.preventDefault() // 计算拖拽的偏移距离 const distanceX = ev.clientX - disX const distanceY = ev.clientY - disY el.scrollTo(originalScrollLeft - distanceX, originalScrollTop - distanceY) console.log(originalScrollLeft - distanceX, originalScrollTop - distanceY) // 由于我们的图片本身有点击效果,所以需要在鼠标拖动的时候将点击事件屏蔽掉 el.style['pointer-events'] = 'none' document.body.style['cursor'] = 'grabbing' } document.onmouseup = function () { document.onmousemove = null document.onmouseup = null el.style['scroll-behavior'] = originalScrollBehavior el.style['pointer-events'] = originalPointerEvents el.style['cursor'] = 'grab' } }})
这里的主要思路就是利用 el.scrollTo 来触发滚动条的移到。
有了 dragscroll 指令,我们来使用一下,首先我们需要在增加一层外层:
// 这里省略一些不太重要的代码
这里需要注意的在 .vue-drag-scroll-out-wrapper 要设置 overflow值,否则无法滚动(测试出来的)。
这样拖拽效果就出来啦:
增加缩放
这里,我们增加一个视图的放大和缩小,所以增加两个按钮:
{{scale}}%
效果:
这里的放大和缩小的逻辑就是通过我们增加减少 scale 来实现
handleReduce () { if (this.scale === 25) return this.scale -= 25},handleEnlarge () { if (this.scale === 100) return this.scale += 25}
缩放比例的关系就是开关给出的代码:
const INIT_WIDTH = 2208const INIT_HEIGHT = 1206const width = INIT_WIDTH * (1 + (100 - this.scale)/100)const height = INIT_HEIGHT * (1 + (100 - this.scale)/100)
这个比例是我自己定的,比如现在减少到 75% ,那么最外层的高和宽就要对应的增加原来的 25%,因为缩放就是视野上的缩小,对应的距离就是拉宽。
最后就是使用 CSS 的 transform 来做缩放:
transform: `scale(${this.scale/100})`
最终的效果:
当前这个只是简单的一个排版,大家根据自己需要布局,这里主要还是分享一些思路,如果大家有好的思路,欢迎留言分享。
java 不让滚动条随着拖拽滑动_「最近项目小结」使用Vue实现一个简单的鼠标拖拽滚动效果插件...相关推荐
- vue aplayer 进度条无法拖动_「最近项目小结」使用Vue实现一个简单的鼠标拖拽滚动效果插件...
演示事例 http://www.longstudy.club/vue-drag-scroll/index.html 最近在做一个新的项目,有个需求是这样的: 简单描述一下,就是鼠标拖动页面,整个页面会 ...
- java中从1到101的素数_「1是不是质数」在c#中完成1到10的素数(1不是素数) - seo实验室...
1是不是质数 int t=0; //素数的个数 Random ran = new Random(); double [] a = new double [10]; console.Write ...
- vue实现简单的鼠标拖拽横向滚动和 鼠标滚轮横向滚动
原文地址:vue实现简单的鼠标拖拽横向滚动和 鼠标滚轮横向滚动_超人不会飞啊的博客-CSDN博客_vue鼠标拖拽 这边如果是动态渲染的div,需要等dom渲染结束后.id存在了.再去设置this.sc ...
- java计算机毕业设计vue开发一个简单音乐播放器(附源码、数据库)
java计算机毕业设计vue开发一个简单音乐播放器(附源码.数据库) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ec ...
- java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署 本源码技 ...
- java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署 本源 ...
- JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库 本源码技术栈: 项目 ...
- jquery 手指滑动多半屏_JS拖拽专题(五)——「玩出花儿来」移动端滑动事件的封装...
欢迎来到我的JS拖拽专题系列文章,本章节将是拖拽系列的最后一篇.感谢大家的支持^_^ 上一章节我们说到了拖拽让图片相互之间交换位置,相对来说是一个比较综合的示例,涉及到了矩形的碰撞检测,勾股定理计算两 ...
- VUE实现一个简单的登录加密和后端(JAVA)解密功能
VUE加密部分 一.VUE部分 1.安装crypto-js 2.在libs下新建secret.js 3.在项目中使用(加密) 二.java部分 1.引入jar包 2.新建工具类AesEncryptUt ...
最新文章
- SAP HUM 没有搬到Storage Type 923的HU能用HU02拆包?
- Unity技术专家:游戏最重要的是好玩而不是高画质...
- 结对开发----找出“水王
- 一致性hash 简单实现
- jzoj1610(初中)-导弹【最大匹配,最短路,二分答案】
- Android Camera框架
- 小程序 - swiper除了左右切换还有上下滚动超出屏幕的内容
- 21 PP配置-生产计划-定义计划订单编号范围
- EventEmitter
- 与敏捷团队一起交付价值
- 主机消息服务器在哪找,怎么找电脑服务器主机地址吗
- 集成ahci驱动的xp系统_IDE转AHCI模式 for win7+SSD
- oracle帐号永久生效,[Linux] alias永久生效
- 服务器版dll修复工具,DLL修复工具哪个好?五款修复能力强推荐
- 计算机科学导论教学大纲,lbrack;机器人学导论rsqb;课程教学大纲
- asp.net pdf如何转换成tif_PDF如何转换成PPT格式?PDF转PPT软件使用方法分享
- 为什么桌面上的计算机打不开怎么办,怎么解决电脑桌面图标打不开
- 【BZOJ4316】小C的独立集
- android+判断wifi+5g,Android判断wifi是5G还是2.4G
- GAMES101-现代计算机图形学入门-闫令琪 - lecture15 光线追踪3 - 辐射度量学、渲染方程(Ray Tracing 3) - 课后笔记