当前位置: 首页 > news >正文

vue 中如何实现鼠标拖动出发滚动条的跟随移动?

使用场景

在做弹窗、表单或 tab 切换需求的时候,有时候因为内容过长会导致出现滚动条,但是只能拖动滚动条时会导致操作不便,我们会希望实现通过拖动内容区实现滚动条的滑动。这样操作就会简单多了。

实现思路

如果要实现鼠标辅助触发滚动条的移动,需要借助 mousedown,mouseup,mousemove 三个事件,通过鼠标的移动来动态修改滚动条的scrollLeft和scrollTop,来模拟实现滚动条的位置变更。

为方便复用,我们可以创建一个类来封装鼠标事件,使用时把事件挂载到指定容器即可。

1. 创建 move.js 文件

move.js下载地址

move.js 具体代码:

// 鼠标移动滚动位置类
class Drag {constructor(vm) {this.dragWrap = vm;// 要挂载的容器this._dom = {};this._x = 0;this._y = 0;this._top = 0;this._left = 0;this.move = false;this.down = false;this.init.apply(this, arguments);}// 绑定事件init() {this.bindEvent();}// 给要素增加鼠标事件// mousedown 按下初始化// mousemove 移动// mouseup,mouseleave 松开,移出结束移动bindEvent() {let t = this;this.dragWrap.addEventListener('mousedown', (e) => {e && e.preventDefault();if (!t.move) {t.move = false;t.down = true;t._x = e.clientX;t._y = e.clientY;t._top = t.dragWrap.scrollTop;t._left = t.dragWrap.scrollLeft;}}, { passive: false});this.dragWrap.addEventListener('mouseup',  (e) => {e && e.preventDefault();t.move = false;t.down = false;}, { passive: false});this.dragWrap.addEventListener('mouseleave',  (e) => {e && e.preventDefault();t.move = false;t.down = false;}, { passive: false});this.dragWrap.addEventListener('mousemove',  (e) => {if (t.down) {e && e.preventDefault();t.move = true;let x = t._x - e.clientX;let y = t._y - e.clientY;t.dragWrap.scrollLeft = t._left + x;t.dragWrap.scrollTop = t._top + y;}}, { passive: false});}
}
export default Drag;
2. 页面中引用
// 需要拖动的 div
<div class="tabBox" id="tabBox"></div>import Drag from '@/utils/move.js';
mounted() {this.changeSlider()this.initScroll()},
methods: {changeSlider(){let nav = document.getElementById('tabBox')// 滚动元素的父容器:刷新滚轮nav.scrollIntoView()},initScroll() {let nav = document.getElementById('tabBox')new Drag(nav)},
}

这样就实现啦,就是如此简单!

相关文章:

vue 中如何实现鼠标拖动出发滚动条的跟随移动?

使用场景 在做弹窗、表单或 tab 切换需求的时候&#xff0c;有时候因为内容过长会导致出现滚动条&#xff0c;但是只能拖动滚动条时会导致操作不便&#xff0c;我们会希望实现通过拖动内容区实现滚动条的滑动。这样操作就会简单多了。 实现思路 如果要实现鼠标辅助触发滚动条…...

【Java EE】文件IO

Author&#xff1a;MTingle major:人工智能 --------------------------------------- Build your hopes like a tower! 目录 一、文件是什么&#xff1f; 二、针对文件系统操作的API 1.文件路径&#xff0c;文件名&#xff0c;文件是否存在 2. 创建文件 3.删除文件&#…...

使用 React、Material-UI、Spring、MySQL、MyBatis 以及高德 API 模拟实时位置信息

要使用 React、Material-UI、Spring、MySQL、MyBatis 以及高德 API 模拟实时位置信息&#xff0c;你可以按以下步骤来实现&#xff1a; 目录 1. 前端 (React Material-UI) 2. 后端 (Spring Boot MyBatis MySQL) 3. 模拟实时位置数据 4. 前后端联调 1. 前端 (React Mat…...

UniApp一句话经验: px -> rpx动态转换和动态元素区域的获取

px->rpx转换 在多终端条件下&#xff0c;什么devicePixelRatio&#xff0c;upx2px都是不靠谱的&#xff0c;最直接的是这样&#xff1a; const { screenWidth } uni.getSystemInfoSync()const pixelUnit screenWidth / 750 // rpx->px比例基数 动态元素区域获取 多终…...

Python基于flask框架的智能停车场车位系统 数据可视化分析系统fyfc81

目录 技术栈和环境说明解决的思路具体实现截图系统设计python语言django框架介绍flask框架介绍性能/安全/负载方面可行性分析论证python-flask核心代码部分展示python-django核心代码部分展示技术路线操作可行性详细视频演示源码获取 技术栈和环境说明 结合用户的使用需求&…...

海外服务器哪个速度最快且性能稳定

海外服务器的速度与性能稳定性受多种因素影响&#xff0c;包括地理位置、网络架构、基础设施质量以及用户网络路径等。在众多选择中&#xff0c;几个特定地区的服务器因其卓越表现而备受推崇。 首先&#xff0c;美国硅谷(加利福尼亚州)与纽约的服务器以其技术领先、网络连接稳定…...

C/C++通过CLion2024进行Linux远程开发保姆级教学

目前来说&#xff0c;对Linux远程开发支持相对比较好的也就是Clion和VSCode了&#xff0c;这两个其实对于C和C语言开发都很友好&#xff0c;大可不必过于纠结使用那个&#xff0c;至于VS和QtCreator&#xff0c;前者太过重量级了&#xff0c;后者更是不用说&#xff0c;主要用于…...

工程师 - 如何安装Windows 终端

Windows 终端是一款适用于 Windows 的现代命令行应用程序&#xff0c;支持多个终端会话&#xff0c;包括 Command Prompt、PowerShell 和 Windows Subsystem for Linux (WSL)。它具有标签式界面、可定制的设置&#xff08;如主题和按键绑定&#xff09;、改进的文本渲染以及对 …...

UniApp 从Vue2升级为Vue3需要注意哪些方面

Vue官方已经发布了Vue3&#xff0c;Vue2不再维护&#xff0c;也在建议大家都迁移到Vue3&#xff0c;所以Vue2终会被淘汰。 那么UniApp 从Vue2升级为Vue3需要注意哪些方面&#xff1a; 1、main.js 下面请看创建应用实例Vue2与Vue3的不同&#xff1a; Vue2的写法&#xff1a;…...

前端面试CSS常见题目

1. CSS 选择器的优先级 (Specificity) 面试官通常会问你如何计算 CSS 选择器的优先级&#xff0c;这对于避免样式冲突、提高代码可维护性很重要。 优先级计算规则&#xff1a; !important 优先级最高。内联样式&#xff08;例如&#xff1a;<div style"color: red;&…...

408算法题leetcode--第10天

643. 子数组最大平均数 I 643. 子数组最大平均数 I思路&#xff1a;滑动窗口时间&#xff1a;O(n)&#xff1b;空间&#xff1a;O(1) class Solution { public:double findMaxAverage(vector<int>& nums, int k) {double ret 0, temp 0;size_t size nums.size()…...

13年计算机考研408-数据结构

解析&#xff1a; 这个降序链表不影响时间复杂度&#xff0c;因为是链表&#xff0c;所以你想要升序就使用头插法&#xff0c;你想要降序就使用尾插法。 然后我们来分析一下最坏的情况是什么样的。 因为m和n都是两个有序的升序序列。 如果刚好m的最大值小于n的最小值&#xff0…...

跨平台开发新视角:利用Android WebView实现Web内容的原生体验

在移动应用开发领域&#xff0c;跨平台解决方案一直是一个热门话题。开发者们不断寻求能够同时在iOS和Android平台上提供一致用户体验的方法。而Android的WebView组件&#xff0c;作为一个强大的工具&#xff0c;允许开发者在Android应用中嵌入Web内容&#xff0c;为用户提供接…...

Stable Diffusion 使用详解(11)--- 场景ICON制作

目录 背景 controlNet 整体描述 Canny Lineart Depth 实际使用 AI绘制需求 绘制过程 PS打底 场景模型选择 设置提示词及绘制参数 controlnet 设置 canny 边缘 depth 深度 lineart 线稿 效果 背景 这段时间不知道为啥小伙伴似乎喜欢制作很符合自己场景的ICON。…...

【Linux系统编程】第二十弹---进程优先级 命令行参数 环境变量

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、进程优先级 2.1、什么是优先级 2.2、优先级的描述 2.3、优先级与权限的关系 2.4、为什么要有优先级 2.5、Linux优先级的…...

无人机之4G模块的主要功能和优势

一、增强图传 在无人机飞行过程中&#xff0c;传统的图传方式可能会受到信号遮挡或干扰的影响&#xff0c;导致图像传输不稳定甚至中断。而4G模块通过结合4G网络技术&#xff0c;能够在原有图传技术的基础上提供增强的图传功能。当传统图传信号不佳时&#xff0c;无人机可以自动…...

深度学习-03 Pytorch

损失函数是用来衡量模型预测结果与真实值之间的差异&#xff0c;并用来优化模型的指标。在机器学习和神经网络中&#xff0c;常用的损失函数包括均方误差&#xff08;Mean Squared Error&#xff0c;MSE&#xff09;、交叉熵&#xff08;Cross-Entropy&#xff09;等。 反向传播…...

GRU(门控循环单元)的原理与代码实现

1.GRU的原理 1.1重置门和更新门 1.2候选隐藏状态 1.3隐状态 2. GRU的代码实现 #导包 import torch from torch import nn import dltools#加载数据 batch_size, num_steps 32, 35 train_iter, vocab dltools.load_data_time_machine(batch_size, num_steps)#封装函数&…...

【医疗大数据】医疗保健领域的大数据管理:采用挑战和影响

选自期刊**《International Journal of Information Management》**&#xff08;IF:21.0) 医疗保健领域的大数据管理&#xff1a;采用挑战和影响 1、研究背景 本研究的目标是调查阻止医疗机构实施成功大数据系统的组织障碍&#xff0c;识别和评估这些障碍&#xff0c;并为管理…...

gevent + flask 接口会卡住

在使用 gevent 和 Flask 处理 CPU 密集型任务时&#xff0c;确实可能会遇到性能瓶颈。这是因为 gevent 主要优化的是 I/O 密集型任务&#xff0c;而不是 CPU 密集型任务。以下是一些可能的原因和解决方案&#xff1a; 原因 Gevent 的协程模型&#xff1a; gevent 使用 greenle…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

提升移动端网页调试效率:WebDebugX 与常见工具组合实践

在日常移动端开发中&#xff0c;网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时&#xff0c;开发者迫切需要一套高效、可靠且跨平台的调试方案。过去&#xff0c;我们或多或少使用过 Chrome DevTools、Remote Debug…...