点击按钮横向滚动左右滚动

最新推荐文章于 2025-06-05 17:03:18 发布

原创

最新推荐文章于 2025-06-05 17:03:18 发布 · 5.3k 阅读

37 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3 #css #vue

这篇博客分享了一种简单实现Vue.js中点击按钮进行左右滚动的交互效果。作者通过设置样式和JavaScript代码，利用scrollLeft、scrollWidth和clientWidth属性实现了平滑的滚动效果。博客内容详细介绍了代码实现过程，并提供了清晰的代码示例，适合初学者参考学习。

好久都没更新过了，大概有一年时间没写过了，这一年实在是太松懈了，遇到点新的东西就想写下来，但是都是没什么时间，等有时间了就忘记了…可能这一年留给生活的时间更多一点叭

大概是上个月，遇上了个点击左右滚动这么一个小交互，本人对于动态交互这些东西一直都不怎么擅长，不然也不至于一个左右点击滚动也要记下来，当然本次记录也是想给大家提供个参考。写的时候百度了挺多的，但是都挺复杂的，本人没啥耐心，第一眼看着复杂的基本上就不会往下看了，so，干脆自己写一套吧，本人感觉本人的这个思路，算得上是很简单的了！！

首先呢，先写好样式，左右滚动，肯定就是横向的了

分配一下每个元素的角色

在这里插入图片描述

html

    <div id="click-scroll-X">
    <span class="left_btn" @click="leftSlide">《</span>
    <div class="scroll_wrapper"

最低0.47元/天解锁文章