vue 中横向滚动设置scrollLeft，并且加上过渡动画

最新推荐文章于 2024-06-20 13:10:23 发布

小白阿里里

最新推荐文章于 2024-06-20 13:10:23 发布

阅读量1w

点赞数 7

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_39224266/article/details/107958068

版权

本文介绍如何在Vue中实现横向滚动，并结合过渡动画，当点击第四个选项时，内容会平滑移动到目标位置，展示下一个选项。由于`scrollLeft`属性不支持CSS控制，因此采用定时器分步移动的策略来达成动画效果。

摘要由CSDN通过智能技术生成

图一
在这里插入图片描述
图二

如图一所示，需求是比如在点击第四个选项时，会自动移至前方，并显示出下一个选项，到图二效果

由于scrollLeft 不是css中的属性，所以用css无法解决

思路：

将需要移动的距离均分，设置定时器每隔一段时间移动一点，直到移动至目标距离为止，下面直接上代码

// html
<div class="scrollView" ref="idSwiperImg">
	<div class="chooseImgItem" @click="tabClick(index)" v-for="(item, index) in normalData" :key="index" ref="imgList">
    	<van-image :src="item.pic[0].url" fit=</

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小白阿里里

关注关注

7
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue 文字无缝滚动_vue文字横向滚动公告

weixin_39883670的博客

12-20

1754

vue实现列表滚动的过渡动画

10-15

主要为大家详细介绍了vue实现列表滚动的过渡动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

1 条评论您还未登录，请先登录后发表或查看评论

vue 实现通过鼠标滚轮横向滚动

cdd9527的博客

04-28

1266

vue 实现通过鼠标滚轮横向滚动

vue横向滚动

最新发布

weixin_57564706的博客

06-20

570

开发过程中可能会碰到这样的情况，比如一张特别长的图在不被压缩的情况下屏库视口放不下就会出现横向滚动条，但是有些用户不清楚需要按下Shift加滚轮可以进行横向滚动，就只能按着滚动条进行拖动，这样对于用户体验不是很好。所以，就需要鼠标滚动来进行横向滚动，首先大家可以想到模拟键盘事件比如鼠标移入后模拟按下shift。但是浏览器是不允许js模拟按下Shift，所以我用到了监听滚动事件进行设置滚动方向以及距离。这里我使用的是vue的自定义属性通过监听这个元素的滚动事件在每次滚动时候横向滚动25px。

VUE中鼠标滚轮使div左右滚动

weixin_47113728的博客

12-12

2887

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

vue2通过scrollIntoView实现页面滚动过渡动画

Yourlittlecutie的博客

10-26

861

页面div 绑定 @scroll="scrollEvent" 方法，

让滚动条滚动到指定位置，带动画效果 jQuery

iteye_19878的博客

01-13

1057

让滚动条滚动到指定位置，带动画效果 jQuery $('html,body').animate({scrollTop: ID.offset().top},300); 滚动到指定位置悬浮 var oDiv=document.getElementById("float"); var H=0,iE6; var Y=oDiv; while(...

在vue中实现横向滑动盒子以及点击滑动盒子

qq_35452726的博客

11-09

1133

在我们平时的项目需求中可能会遇到这样的需求，就是多个数据，同时只能展示出3个，这时候就该用上我们的滑动了，先设置css样式。因为一次性改变它的scrollLeft 会给我们一种卡顿的现象，所以在移动的时候我加了一些处理，这样看起来更平滑，更顺畅。/* 超出滚动的关键，没有它元素会自动缩小，不会滚动 */下面是子盒子,子盒子的数量一定要大于3个，flex-shrink很关键。以上便能够实现盒子内的滑动了，如果想多加上一些功能的话，看下面。

vue实现滑动切换：切换选项时滑块有滑动过渡的效果

weixin_45313351的博客

12-27

1400

封装的一个带有色块滑动的组件，切换选项时色块有滑动过渡的效果

基于 Vue3打造前台+中台通用提效解决方案（上）

oschina_41559824的博客

03-04

1567

本项目使用 + 来实现前中台解决方案因为，之前的项目一直都是使用作为构建工具；出来这么久了，也没有用过；所以想在当前项目下进行使用；webpack vite 2.2、这么快会有什么问题吗？如果大家对的构建机制有了解的话，那么应该可以发现一个问题。那就是**既然以原生的方式为浏览器提供源码，让浏览器接管了打包的部分工作**，那么假如我们的项目中存在的内容怎么办?是不是就意味着无法解析呢? 是的! 在的早期版本中，确实存在这个问题，这个问题导致的最核心的麻烦就是很多的依赖无法使用。比如因为

vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果

10-17

主要介绍了vue + any-touch实现一个iscroll实现拖拽和滑动动画效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

vue左右拖动上下滚动组件

02-15

这是一个vue,pc端上的局部上下滚动，左右拖动单元格元素组件

Scroll-animation:滚动动画（用于网站）

05-26

滚动动画遍历媒体“ 50天内有50个项目”

滚动消息跑马灯效果

07-28

- **用户体验**：良好的滚动效果应该具有平滑的过渡，合理的滚动速度，并且允许用户控制滚动方向和速度。 5. **适配性与兼容性**： - **响应式设计**：确保滚动消息在不同设备和屏幕尺寸上都能正常工作，可能需要...

横向的js相册效果

03-21

然而，为了提升用户体验，还可以考虑添加更多功能，比如图片预加载、触屏滑动支持、自动轮播、过渡动画等。在实际项目中，可以使用现有的JS库或框架（如jQuery、React、Vue等）来简化开发过程，同时提供更丰富的功能...

小程序如何隐藏滚动条

Shimeng_1989的博客

07-11

3037

小程序如何隐藏滚动条/隐藏scroll-view滚动条

JavaScript js无间断滚动效果 scrollLeft方法使用模板

weixin_30262255的博客

07-23

329

JavaScript js无间断滚动效果 scrollLeft方法使用模板<!DOCTYPE HTML><html><head><meta charset="utf-8"/><title> 无间断滚动scrollLeft套用模板 </title><meta name="Keywords" content=""...

vue中手写动态渲染左右滚动菜单栏点击居左以及设置scrollLeft属性设置无效的原因解决

m0_53718249的博客

09-24

3128

vue中可能会碰到无法使用框架的问题，此时需要手写左右滚动的滑动菜单栏，并且头部或者底部还有对应的标题点击定位。此时应该怎么做呢？（1）下面看结构： <divclass="courseCate-box"> <divclass="courseCate flex" :id="'cate'+pIndex"> <licl...