vue3全局修改滚动条样式

### Vue3 全局自定义滚动条样式的方法

为了在 Vue3 项目中全局修改滚动条样式，可以采用 CSS 和 JavaScript 结合的方式。具体来说，在项目的根组件 `App.vue` 中引入通用的滚动条样式，并利用 Vue 的生命周期钩子来处理一些动态行为。

#### 使用纯CSS方式定制滚动条外观

对于大多数现代浏览器而言，可以通过覆盖默认的 WebKit 滚动条样式来进行简单的自定义：

/* 修改滚动条 */
.scroll {
    scrollbar-color: #f0f0f0;
    scrollbar-width: thin; /* Firefox 浏览器专用 */
}

::-webkit-scrollbar {
    width: 5px; /* 竖直方向上的宽度 */
}
  
::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: #4BB86E !important;
}
  
::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
}

需要注意的是 `-ms-overflow-style:none;` 这一属性仅适用于 Internet Explorer 及 Edge (旧版)，随着这些浏览器逐渐被淘汰，该声明可能不再被广泛支持[^1]。

#### 利用JavaScript增强交互体验

当涉及到更复杂的场景比如响应式设计或是需要监听页面内特定区域的高度变化时，则建议借助于 JavaScript 来完成进一步的功能扩展。这里推荐使用 MutationObserver API 实现对 DOM 节点变动情况下的实时监听并作出相应调整[^3]。

例如可以在 App.vue 文件中的 mounted 钩子里初始化观察者实例:

import { onMounted, ref } from 'vue';

export default {
  setup() {
    const scrollElement = ref(null);

    function observeChanges(targetNode) {
      let observer;

      if (window.MutationObserver) {
        observer = new MutationObserver((mutationsList) => {
          mutationsList.forEach(mutation => {
            // 当目标节点发生变化时触发的操作逻辑...
            console.log('Detected changes:', mutation);
          });
        });

        observer.observe(targetNode.value, { attributes : true, childList: true, subtree:true });
      }
      
      return () => {
        if(observer){
           observer.disconnect();
        }
      };
    }

    onMounted(() => {
      observeChanges(scrollElement);
    });

    return {
      scrollElement,
    };
  },
};

上述代码片段展示了如何创建一个名为 `observeChanges()` 函数用于启动针对指定 HTML 元素 (`scrollElement`) 的变更监视过程；一旦检测到任何结构或属性方面的改动便会执行相应的回调函数。此外还实现了卸载清理机制以防止内存泄漏问题的发生。

通过以上两种手段相结合即可满足大部分情况下关于 vue3 应用程序里全局范围内的滚动条美化需求。