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

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

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

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

分配一下每个元素的角色

html

    <div id="click-scroll-X"><span class="left_btn" @click="leftSlide">《</span><div class="scroll_wrapper" ref="wrapperCon"><div class="scroll_list"><div class="item" v-for="(i, idx) in 10" :key="idx">我是子元素{{ idx }}</div></div></div><div class="right_btn" @click="rightSlide">》</div></div>

css

#click-scroll-X {display: flex;align-items: center;.left_btn,.right_btn {font-size: 30px;cursor: pointer;}.scroll_wrapper {width: 600px;overflow-x: scroll;padding: 20px 0;.scroll_list{display: flex;align-items: center;justify-content: space-between;.item {width: 100px;height: 100px;display: flex;align-items: center;justify-content: center;border: 1px solid red;box-sizing: border-box;flex-shrink: 0;}}}

接下来了解一下需要用到的属性

1.scrollLeft：元素左侧已滚动的距离，即位于元素左边界与元素中当前可见内容的最左端之间的距离

2.scrollWidth:元素的整体宽度，包括由于溢出而无法展示在网页的不可见部分

3.clientWidth:元素的可视宽度

data(){return{// 定时器（方便清除）timer:null}
}

向左滚动

    leftSlide(){// 保存滚动盒子左侧已滚动的距离let left=this.$refs.wrapperCon.scrollLeftlet num=0clearInterval(this.timer)this.timer=nullthis.timer=setInterval(()=>{//   !left:已经滚动到最左侧//   一次性滚动距离（可调节）if(!left||num>=300){// 停止滚动clearInterval(this.timer)this.timer=nullreturn}// 给滚动盒子元素赋值向左滚动距离this.$refs.wrapperCon.scrollLeft=left-=30// 保存向左滚动距离（方便判断一次性滚动多少距离）num+=30},20)// 20：速度（可调节）},

向右滚动

    rightSlide(){// 保存滚动盒子左侧已滚动的距离let left=this.$refs.wrapperCon.scrollLeft// 保存元素的整体宽度let scrollWidth=this.$refs.wrapperCon.scrollWidth// 保存元素的可见宽度let clientWidth=this.$refs.wrapperCon.clientWidthlet num=0clearInterval(this.timer)this.timer=setInterval(()=>{// 已经滚动距离+可见宽度// left+clientWidth>=scrollWidth：滚动到最右侧// num>=300一次性滚动距离if(left+clientWidth>=scrollWidth||num>=300){clearInterval(this.timer)return}// 给滚动盒子元素赋值向左滚动距离this.$refs.wrapperCon.scrollLeft=left+=30// 保存向左滚动距离（方便判断一次性滚动多少距离）num+=30},20)// 20：速度（可调节）}

这就完成了，简简单单啊朋友们！！！！

♥♥ 比心♥♥

点击按钮横向滚动左右滚动相关推荐

** Vue下js点击按钮元素左右滚动效果 **
** Vue下js点击按钮元素左右滚动效果 ** 小程序.前端交流群:609690978 先上效果图代码: <div id="classifyScroll" :class= ...
php中表头不跟着滑动,JS实现table表格固定表头且表头随横向滚动而滚动
这篇文章主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,对js的朋友可以参考下本篇文章先看一张效果图思路: 1.头部用一个table并用一个p包裹着, 表格的具体内容用一个ta ...
（自定义组件）通用- X轴横向：溢出滚动（含代码）- 案例篇
(自定义组件)通用- X轴横向:溢出滚动 (含代码)- 案例篇移动端和pc端通用效果截图: 实例代码: <!DOCTYPE html> <html><head> ...
项目场景-------滚动条横向竖向同步滚动
项目场景之滚动条横向竖向同步滚动 1. 项目场景: 提示:项目上有个自动化数据比对工具需要在视图进行滚动条双向监听滚动: 2. 属性描述: 提示:涉及到几个属性值需要了解: // 垂直滚动条// sc ...
网易云歌词居中滚动、点击/滑动进度条对应滚动、当前播放歌词高亮
当前播放歌词高亮:根据当前播放时间,和歌词时间对比,获得当前歌词行数索引正常居中滚动.点击/滑动进度条对应滚动:(1)因为这几种方式都是改变当前播放时间,所以只需要根据当前播放时间操作即可(2)根据当 ...
点击li,ul滚动条自动滚动到顶部，怎么解决分享。el-tooltip的focusing不要display：none,隐藏就行
点击li,ul滚动条自动滚动到顶部,怎么解决分享.el-tooltip的focusing不要display:none,隐藏就行
在线直播系统源码，横向无限循环滚动的单行弹幕效果
在线直播系统源码,横向无限循环滚动的单行弹幕效果实现的相关代码实现思路分析要实现上面的效果,我们先拆分下实现要素: 1.弹幕布局是从屏幕的右侧向左侧滚动,单个弹幕之间的间距是固定的(设计要求) 2 ...
C#控制鼠标点击，移动，滑轮滚动
前不久无意中发现了一款手机上的软件,看新闻就可以得金币,通过金币可以换取RMB,怀着好奇,我下载了并且点击进去查看了,通过使用,发现这款软件获取金币的方法很简单,就是点击一篇新闻,进去后,隔一段时间滑 ...
转: C#控制鼠标点击，移动，滑轮滚动
C#控制鼠标点击,移动,滑轮滚动 2018年04月15日 23:41:57 阅读数:40 前不久无意中发现了一款手机上的软件,看新闻就可以得金币,通过金币可以换取RMB,怀着好奇,我下载了并且点击进去 ...

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

这就完成了，简简单单啊朋友们！！！！

点击按钮横向滚动左右滚动相关推荐

最新文章

热门文章