改变浏览器滚动条样式

最新推荐文章于 2023-09-15 17:17:05 发布

joe_324

最新推荐文章于 2023-09-15 17:17:05 发布

阅读量48

点赞数

本文链接：https://blog.csdn.net/joe_324/article/details/116989836

版权

src\assets\css\scrollbar.css

@charset "utf-8";
::-webkit-scrollbar {
  width: 6px;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  border-radius: 4px;
  /* background: rgba(0, 0, 0, 0.1); */
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  height: 81px;
  border-radius: 4px;
  /* box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
  background: #E6E7E8;
}

src\App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
@import './assets/css/common.css';
@import './assets/css/scrollbar.css';
</style>