Vue3 - 详细实现容器鼠标拖曳横向滚动功能，在视图范围内用鼠标拖动滚动内容横向翻滚，vue3横向左右拖拽滚动展示预览组件，鼠标拖动触发横向滚动条的滚动（div容器元素中可用鼠标拖动左右滑动效果）

已于 2025-01-19 16:42:44 修改
阅读量6k 收藏 5
点赞数 7
分类专栏： + Vue3 文章标签： vue3 指定元素内鼠标横向滚动内容 按住鼠标左键可左右滑动查看内容 DOM元素内鼠标左右可拖曳滑动 容器内用鼠标左右拖拽代替滚动条 vue3实现盒子内用鼠标翻滚 最新详细教程 组件插件
于 2024-09-23 11:35:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/142452657
版权
+ Vue3 专栏收录该内容
254 篇文章 ¥9.90 ¥99.00
订阅专栏

前言

网上几乎没有这方面教程，本文提供优质示例。

在 vue3 | nuxt3 项目开发中，详解实现容器横向左右可拖曳滑动效果，展示大量内容时让超出的部分溢出隐藏，用户可使用鼠标按住左键在DOM容器里左滑右滑查看预览数据内容，vue3左右滚动组件页面实现左右拖拽，鼠标拖动触发滚动条的移动功能，支持自定义容器宽高等任意样式，传入内容即可自动开启可拖曳模式，并根据内容长度自动适配，手机移动端H5页面和电脑PC端网页都可以用，强大可靠。

提供详细示例代码，新手小白复制运行简单修改即可。

如下图所示（录屏有点卡实际很流畅），您只需要将内容扔到该组件中，便可激活手势拖曳功能。

详细示例代码，保证100%搞定。

在这里插入图片描述

组件源码

具体实现代码如下，请直接复制运行测试即可。

了解本专栏 订阅专栏 解锁全文
vue3横向无限滚动滑块
qq_62809806的博客
03-20 719
vue横向无限滑块
Vue实现移动端左右滑动效果的方法
12-12
1. 最近得到一个新需求，需要在Vue项目的移动端页面上加上左右滑动效果，在网上查阅资料，最终锁定了vue-touch 2. 下载vue-touch （https://github.com/vuejs/vue-touch/tree/next） 注意：如果Vue是2.x 的版本的话，一定要下next分支上的。 3. 使用：     3.1 npm install vue-touch@next --save     3.2 在main.js 中 引入： import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-touch
vue3中实现鼠标拖拽横向滚动内容
五颜六色的白
07-09 658
在utils下面新建一个。文件，然后引入如下代码。在main.js中引入。
vue中鼠标拖动触发滚动条的移动
编写博客，学习交流
01-08 1507
在做后端管理系统中，像弹窗或大的表单时，经常会有滚动条的出现，但有些时候如流程、图片等操作时，仅仅使用鼠标拖动滚动条操作不太方便，如果使用鼠标拖拽图片或容器来触发滚动条的移动就比较方便了。
自定义 Vue3 滚轮选择器组件：实现与原理详解
最新发布
m0_72065108的博客
03-05 597
滚轮选择器是数字界面中常见的交互控件，适用于时间选择、数值调节等场景。本文将基于 Vue3 Composition API，实现一个支持鼠标滚轮拖拽滑动动态适配的高性能滚轮选择器组件。该组件具备以下功能：🖱️滚轮操作：滚动鼠标滚轮逐项切换👆拖拽滑动：按住拖拽实现快速滑动🚀快捷跳转：顶部/底部按钮一键定位首尾项💡视觉反馈：居中高亮 + 渐变透明 + 动态过渡。
VUE中鼠标滚轮使div左右滚动
weixin_47113728的博客
12-12 3114
VUE中鼠标滚轮使div左右滚动 文章目录VUE中鼠标滚轮使div左右滚动前言一、单个实现1.定义变量2.编写方法3.触发4.卸载二、多个实现1.描述2.addEventListener（参数）2.触发3.卸载 前言 技术点： addEventListener/attachEvent 功能描述： 鼠标停在div中，若div有x轴滚动条，则鼠标滚轮控制x轴滚动条横向滚动 一、单个实现 1.定义变量 data () { return { domObj: null } } 2.编写方法 绑定事件 s
vue3横向滚动组件（左右按钮点击滚动）
Du__Du__的博客
08-22 2068
let groupList = ref([{name:123},......])//展示数组。首先，是按钮部分：按钮要根据中间内容是否超出限定区域来展示的，其次，也要根据中间内容部分来进行按钮的禁选状态。let btnLeft = ref(0) //0-不展示 1-显示 2 -禁用。ok，接下来进行函数拼接，首先是组件加载时判断按钮是否展示，其次像滚动区域挂载上滚动事件。left: -600, // 每次点击滚动的距离。left: 600, // 每次点击滚动的距离。2： 控制按钮的显示/隐藏/禁用。
vue3拖拽排序，拖拽过程中滚轮可以操作滚动条滚动并且距离底部一定距离就让滚动条滚动
m0_46365130的博客
06-27 355
【代码】vue3拖拽排序，拖拽过程中滚轮可以操作滚动条滚动并且距离底部一定距离就让滚动条滚动。
vue3-seamless-scroll 自动横向滚动 滚动插件
linx_i的博客
05-15 4786
Vue3.0 无缝滚动组件，支持Vite2.0，支持服务端打包目前组件支持上下左右无缝滚动，单步滚动，并且支持复杂图标的无缝滚动，目前组件支持平台与Vue3.0支持平台一致。
vue3容器内容区域横向推拽滑动横向滚动条组件
qq_21579949的博客
08-21 648
vue3容器内容区域横向推拽滑动横向滚动条组件。 比较实用的的组件，横向溢出内容拖拽内容区左右滑动内容。
Vue 实现鼠标滚轮上下滑动时div左右滑动
m0_62118859的博客
04-12 2437
html代码： <div ref="scrollDiv" @mousewheel="MouseWheel($event)"></div> js代码： methods: { MouseWheel(e){ let eventDelta = -e.wheelDelta || -e.deltaY * 40; let scrollDiv = this.$refs.scrollDiv; scrollDiv.scrollLeft
横向菜单滚动vue3
小白的博客
07-03 438
直接新建一个页面，然后根据自己的需求该样式就行。
Vue3 el-table支持鼠标横向拖拽滚动
qq_41038412的博客
05-28 673
【代码】Vue3 el-table支持鼠标横向拖拽滚动。
vue3滚动滑轮 点击拖拽 事件以及方法
longshao_520的博客
04-08 1438
【代码】vue3滚动滑轮 点击拖拽 事件以及方法。
vue横向滚动添加滚动、拖拽
Pure_White520的博客
07-09 508
vue项目中，可能遇到横向滚动，但是不想显示滚动条，此时想通过拖拽和鼠标滚轮事件进行滚动。
Vue3封装一个左侧可拖拽折叠的侧边栏布局
xiaopiaoliang777的博客
08-14 1984
Vue3封装一个左侧可拖拽折叠的侧边栏布局
vue3 让滚动条中的图片可以实现拖动效果
克里斯蒂亚诺更新的博客
12-10 278
只是一个视觉效果，它本身并不会让图片可以被拖动。因此，如果你希望通过鼠标按住图片来拖动内容，你需要配合 JavaScript 来处理拖动逻辑。不能自动实现拖动滚动的功能，它只是改变鼠标的样式，使其看起来像是可以拖动。
使用js实现超出的内容可以左右滚动
qq_45399146的博客
10-09 4393
因项目需求，需要超出的内容可以左右滚动，未限制实现方法
vue-seamless-scroll实现无缝上下滚动与左右滚动
xinzi11243094的博客
03-09 3734
上下滚动与左右滚动是我们很常见的一个功能，利用vue-seamless-scroll可以实现上下滚动与左右滚动，其官方网站地址是https://www.npmjs.com/package/vue-seamless-scroll，可以查看其用法。首先查看一下效果图： 一、npm安装 npminstallvue-seamless-scroll--save 二、vue页面引用 （1）imp...
js 实现pc端鼠标拖动触发横向滚动条的滚动（隐藏的滚动条）
热门推荐
PrimaryColor
10-12 1万+
我们都知道，pc端的横向滚动条只能点击滚动条进行左右拖动，不能像移动端那样，直接在空白区域就可以左右拖动。 在我的项目中，因为需求是将整个网站的滚动条全部隐藏了，所以就不能点击滚动条来拖动。 效果图1： 效果图2： 效果图1代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王二红

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值