js控制滚动条位置如何实现平滑移动

最新推荐文章于 2024-06-01 20:47:43 发布

-5044

最新推荐文章于 2024-06-01 20:47:43 发布

阅读量740

点赞数

分类专栏： css vue3 js 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_46448762/article/details/129106459

版权

vue3 同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

18 篇文章 0 订阅

订阅专栏

css

8 篇文章 0 订阅

订阅专栏

<template>
    <div class='picture' ref="picRef">
        <img src="@/assets/image/card1.jpg" @click="clickSmoth(1)" alt="">
        <img src="@/assets/image/card2.jpg" @click="clickSmoth(2)" alt="">
        <img src="@/assets/image/card3.jpg" @click="clickSmoth(3)" alt="">
        <img src="@/assets/image/card4.jpg" @click="clickSmoth(4)" alt="">
        <img src="@/assets/image/card5.jpg" @click="clickSmoth(5)" alt="">
        <img src="@/assets/image/card6.jpg" @click="clickSmoth(6)" alt="">
        <img src="@/assets/image/card7.jpg" @click="clickSmoth(7)" alt="">
        <img src="@/assets/image/card8.jpg" @click="clickSmoth(8)" alt="">
        <img src="@/assets/image/card9.jpg" @click="clickSmoth(9)" alt="">
        <img src="@/assets/image/card10.jpg" @click="clickSmoth(10)" alt="">
    </div>
</template>
<script setup>
import { ref } from 'vue'
let picRef = ref(null)
const clickSmoth = (index) => {
    picRef.value.scrollLeft = (index - 1) * 120
}
</script>
<style scoped lang='scss'>
.picture {
    width: 100%;
    margin-bottom: 20px;
    overflow: auto;
    display: flex;
    transition: all 0.5s;
    scroll-behavior: smooth; // 平滑移动
    img {
        width: 170px;
        height: 120px;
        margin-right: 18px;
        margin-bottom: 8px;
    }

}

// 设置滚动条样式 可忽略
.picture::-webkit-scrollbar {
    // width: 4px;
    height: 8px;
}
// 设置滚动条样式 可忽略
.picture::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: $mainColor;
}
// 设置滚动条样式 可忽略
.picture::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ccc;
}
</style>