【Vue3】页面优化：清除全局滚动条但页面仍可滚动

滚动条有时候挺烦的，特别是有些页面有滚动条有些页面没有，就会造成页面抖动影响体验，所以我们可以全局禁用滚动条来保证页面的一致性

---

主要就是用到一个伪类选择器

::-webkit-scrollbar {
        display: none;
      }

---

• 1.在全局 CSS 文件（例如 src/assets/styles/global.css）中添加以下样式

/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}

/* 适用于所有浏览器 */
body {
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
}

• 2.在你的项目中引入了全局 CSS 文件,在 src/main.ts 中添加以下代码

import './assets/styles/global.css';

---

或者直接在index.html中写style

<style>
   ::-webkit-scrollbar {
     display: none;
   }
   body {
     margin: 0;
     padding: 0;
     overflow: -moz-scrollbars-none;
     -ms-overflow-style: none;
   }
</style>