点击按钮控制滚动条滚动

<div class="tags">// 左侧按钮<el-link :underline="false" @click="leftClick" :disabled="showLeftIcon"><div class="backColor" style="float:left;margin: 8px 0"><i class="el-icon-arrow-left" /></div></el-link>//滚动内容<div id="tags-view-container" class="tags-view-container"><scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll"><router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''":to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item":style="activeStyle(tag)" @click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"@contextmenu.prevent.native="openMenu(tag, $event)">{{ tag.title }}<span style="float: right;line-height: 20px" v-if="!isAffix(tag)" class="el-icon-close"@click.prevent.stop="closeSelectedTag(tag)" /></router-link></scroll-pane><ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu"><li @click="refreshSelectedTag(selectedTag)"><i class="el-icon-refresh-right"></i> 刷新页面</li><li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><i class="el-icon-close"></i> 关闭当前</li><li @click="closeOthersTags"><i class="el-icon-circle-close"></i> 关闭其他</li><li v-if="!isFirstView()" @click="closeLeftTags"><i class="el-icon-back"></i> 关闭左侧</li><li v-if="!isLastView()" @click="closeRightTags"><i class="el-icon-right"></i> 关闭右侧</li><li @click="closeAllTags(selectedTag)"><i class="el-icon-circle-close"></i> 全部关闭</li></ul></div>//右侧按钮<el-link :underline="false" @click="rightClick" :disabled="showRightIcon"><div class="backColor" style="float:right;margin: 8px 0"><i class="el-icon-arrow-right" /></div></el-link></div>//js部分export default {components: { ScrollPane },data() {return {showLeftIcon: true,showRightIcon: false,maxClickNum: 0, // 最大点击次数lastLeft: 0, // 上次滑动距离clickNum: 0, // 点击次数}},methods: {// 点击右箭头rightClick() {// 如果点击次数小于数组长度-1时，执行左滑动效果。if (this.clickNum < this.visitedViews.length - 1) {// 获取当前元素宽度+右边距let width = document.querySelectorAll('.tags-view-item')[this.clickNum].offsetWidth + 10// 获取最后一个元素距离左侧的距离+元素本身的宽度let lastItemOffsetLeft = document.getElementsByClassName('tags-view-item')[this.visitedViews.length - 1].offsetLeft + width// 获取可视区域宽度const lookWidth = document.getElementsByClassName('tags-view-wrapper')[0].clientWidth// 计算可视化区域和最后一个元素的距离之间的差值const value = lookWidth - lastItemOffsetLeft// 如果最后一个元素距离左侧的距离大于可视区域的宽度，表示最后一个元素没有出现，执行滚动效果if (lastItemOffsetLeft > lookWidth) {if (value > -width && value < 0) {// 最后一次点击// 公示：滚动距离（元素的magin-left值） = 负的它自己的长度 + 上一次滑动的距离document.getElementsByClassName('tags-view-item')[0].style.marginLeft = `${value + this.lastLeft}px`this.lastLeft = value + this.lastLeft// 点击次数+1this.clickNum += 1// 记录到最后一个元素出现在可视区域时，点击次数的最大值。用于后面点击左侧箭头时判断右侧箭头的显示this.maxClickNum = this.clickNum//最后一次禁用右箭头this.showRightIcon = true}else{// 公示：滚动距离（元素的magin-left值） = 负的它自己的长度 + 上一次滑动的距离document.getElementsByClassName('tags-view-item')[0].style.marginLeft = `${-width + this.lastLeft}px`this.lastLeft = -width + this.lastLeft// 点击次数+1this.clickNum += 1// 记录到最后一个元素出现在可视区域时，点击次数的最大值。用于后面点击左侧箭头时判断右侧箭头的显示this.maxClickNum = this.clickNum}this.showLeftIcon = false}}},// 点击左箭头leftClick() {// 当点击次数大于0时才触发，这样当点击次数clickNum等于1的到时候，clickNum--等于0.根据计算属性的判断会隐藏掉左箭头if (this.clickNum > 0) {// 获取当前元素宽度let width = document.querySelectorAll('.tags-view-item')[this.clickNum - 1].offsetWidth + 10// 公示：滚动距离（元素的magin-left值） = 它自己的长度 + 上一次滑动的距离if (this.lastLeft > -width) {// 最后一次document.getElementsByClassName('tags-view-item')[0].style.marginLeft = `0px`this.lastLeft = 0}else{document.getElementsByClassName('tags-view-item')[0].style.marginLeft = `${this.lastLeft + width}px`this.lastLeft = width + this.lastLeft}// 点击次数-1this.clickNum --// 如果点击次数小于最大点击次数，说明最后一个元素已经不在可是区域内了，显示右箭头if (this.clickNum === 0) {this.showLeftIcon = true}}this.showRightIcon = false},}
}
</script>
// css部分
<style lang="scss" scoped>
//隐藏滚动条
::v-deep .el-scrollbar__bar.is-horizontal {height: 0px;left: 2px;
}
//最外层容器
.tags {display: flex;padding: 0 10px;background-color: #f8f8f8;
}
//按钮背景样式
.backColor {border: 1px solid #E6EDF9;border-radius: 2px;background-color: #fff;width: 26px;height: 26px;padding: 4px;
}
//滚动内容
.tags-view-container {width: 100%;overflow-x: auto;padding: 8px 10px;height: 42px;background: #F2F4F8;// box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);.tags-view-wrapper {.tags-view-item {display: inline-block;position: relative;cursor: pointer;height: 26px;width: 130px;line-height: 26px;background: #FFFFFF;box-shadow: 0 2px 4px 0 #E4E8EF;border-radius: 2px;color: #242939;padding: 0 8px;font-size: 12px;margin-right: 10px;&:first-of-type {// margin-left: 15px;}&:last-of-type {// margin-right: 15px;}&.active {background-color: #FFFFFF !important;color: #006EFF !important;border-color: #006EFF !important;}}}
}
</style>

点击按钮控制滚动条滚动相关推荐

android控制滚动条滚动
android控制滚动条滚动运行结果: 主Activity: public class MainActivity extends Activity { private RelativeLayout ...
html点击展开盒子变大,JS实现点击按钮控制Div变宽、增高及调整背景色的方法
本文实例讲述了JS实现点击按钮控制Div变宽.增高及调整背景色的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript实现点击按钮后改变DiV的高度.宽度和背景色等,点击对应按钮,Div ...
Bootstrap—点击按钮控制div隐藏和显示的切换（图文详情）
Bootstrap-点击按钮控制div隐藏和显示的切换第一步:bootstrap有一个open类用来控制隐藏和显示,动态获取open是true还是false,并且点击按钮让toggle的true和f ...
** Vue下js点击按钮元素左右滚动效果 **
** Vue下js点击按钮元素左右滚动效果 ** 小程序.前端交流群:609690978 先上效果图代码: <div id="classifyScroll" :class= ...
vue-cli网页聊天室：当聊天室有新消息时，控制滚动条滚动到底部
做一个网页聊天室页面,功能需求是:当有新消息出现在聊天室页面时,控制页面滚动条滚动到页面底部: 聊天室页面代码如下: data中的消息列表: messageList: [{Character: &qu ...
点击按钮控制div隐藏和显示
要求:有一个按钮,点击按钮使得div消失,之后将按钮文字改变为显示,再次点击按钮使得div出现,依次类推.效果如下图方法一引入vue <html><head>< ...
unity点击按钮控制界面开关
项目场景: 问题描述 `提示:将下面这个方法挂在到button上 public void ActiveGob(GameObject gameObject){gameObject.SetActive(! ...
微信小程序通过点击按钮控制元素隐藏与显示
目录一.效果图: 二.代码 js: wxml: 一.效果图: 二.代码 js: Page({data:{hidden:false, }, // 隐藏yincang:function(e){setTi ...
使用selenium控制滚动条（非整屏body）
方法原理: (1)使用jQuery CSS 操作 - scrollTop() 方法,设置 <div> 元素中滚动条的垂直偏移,语法:$(selector).scrollTop(offset ...

点击按钮控制滚动条滚动

点击按钮控制滚动条滚动相关推荐

最新文章

热门文章