其他分享
首页 > 其他分享> > vue实现滚动条点击切换距离（滚动条隐藏样式）

vue实现滚动条点击切换距离（滚动条隐藏样式）

作者：互联网

目录

1、html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击移动</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
	<div id="app">
        <div class="content_box" ref="refScrollLeft">
            <div class="item" v-for="item in 24" :key="item" @click="clickMovement(item)">{{item}}
            </div>
        </div>
    </div>

    <script src="/node_modules/vue/dist/vue.js"></script>
    <script src="./index.js"></script>
</body>

</html>

2、JavaScript

new Vue({
    el: "#app",
    data() {
        return {
            oldVal: 0,
            scrollLeft: 0
        }
    },
    mounted() {

    },

	methods: {
        clickMovement(val) {
            if (val > this.oldVal) {
                this.scrollLeft = this.scrollLeft + 180;
            } else {
                this.scrollLeft = this.scrollLeft - 180;
            }
            // 关键代码
            this.$refs.refScrollLeft.scrollLeft = this.scrollLeft;
            this.oldVal = val;
        }
    }
});

3、css

#app {
    position: absolute;
    left: 50%;
    transform: translate(-50%, );
}

.content_box {
    width: 300px;
    display: flex;
    align-items: center;
    padding: 1em 0;
    overflow-x: scroll;
}

.content_box::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

.item {
    height: 2em;
    text-align: center;
    line-height: 2em;
    background-color: #686868;
    color: #fff;
	margin: 0 10px;
    padding: 0 1em;
    cursor: pointer;
}

标签：vue,val,color,app,oldVal,scrollLeft,height,滚动条,点击
来源： https://blog.csdn.net/weixin_51157081/article/details/120773155