vue滚动条样式怎么修改

百变鹏仔 3个月前 (09-25) #VUE

文章标签样式

在 vue 中修改滚动条样式的方法有：使用 css 覆盖默认样式；使用 javascript 动态修改样式；使用自定义组件。

修改 Vue 滚动条样式

在 Vue 中，可以通过以下步骤轻松修改滚动条样式：

1. 使用 CSS 覆盖默认样式

/* 覆盖默认滚动条样式 */::-webkit-scrollbar {  width: 10px;  height: 10px;}/* 设置滚动条轨道的颜色 */::-webkit-scrollbar-track {  background-color: #f5f5f5;}/* 设置滚动条滑块的颜色 */::-webkit-scrollbar-thumb {  background-color: #888;}/* 设置滚动条滑块悬停时的颜色 */::-webkit-scrollbar-thumb:hover {  background-color: #555;}

2. 使用 JavaScript 动态修改样式

立即学习“前端免费学习笔记（深入）”；

import { ref } from 'vue';export default {  setup() {    // 创建一个 ref 来存储滚动条的 DOM 元素    const scrollbar = ref(null);    // 在 mounted 生命周期钩子中，为滚动条添加自定义样式    onMounted(() =&gt; {      if (!scrollbar.value) return;      scrollbar.value.style.width = '10px';      scrollbar.value.style.height = '10px';      scrollbar.value.style.backgroundColor = '#f5f5f5';    });  },};

3. 使用自定义组件

您可以创建一个自定义滚动条组件，并针对特定需求自定义其样式：

<template><div class="custom-scrollbar" ref="scrollbar">    <slot></slot></div></template><script>import { ref, onMounted } from 'vue';export default {  setup() {    const scrollbar = ref(null);    onMounted(() => {      if (!scrollbar.value) return;      // 在这里为滚动条添加自定义样式    });  },};</script><style>.custom-scrollbar {  overflow: auto;  width: 100%;  height: 100%;  /* 滚动条样式 */  ::-webkit-scrollbar {    width: 10px;    height: 10px;  }  ::-webkit-scrollbar-track {    background-color: #f5f5f5;  }  ::-webkit-scrollbar-thumb {    background-color: #888;  }  ::-webkit-scrollbar-thumb:hover {    background-color: #555;  }}</style>

文章推荐

vue滚动条样式怎么修改

如何使用Vue和网易云API构建高性能的音乐搜索引擎

Vue中使用v-model的双向绑定优化应用的数据性能

Vue和Canvas：如何实现在线头像裁剪和尺寸调整工具

Vue组件通讯的实现方式有哪些？

如何使用Vue和网易云API开发一款智能化的音乐播放器