css之overflow滚动条各个浏览器隐藏

Circle_Key

已于 2024-07-18 15:37:59 修改

阅读量532

点赞数 9

文章标签： css 前端

于 2024-01-19 10:18:33 首次发布

本文链接：https://blog.csdn.net/Circle_Key/article/details/135690930

版权

  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; /* 在支持的设备上启用平滑滚动 */ 
/* 隐藏滚动条 */
 scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
/* 隐藏 WebKit 浏览器的滚动条 */
&::-webkit-scrollbar {
  display: none;
}

或者
      /* 隐藏滚动条 */
   scrollbar-width: thin; /* Firefox */
   scrollbar-color: transparent transparent; /* Firefox */
  
   &::-webkit-scrollbar {
     width: 0; /* 滚动条宽度 */
   }
  
   &::-webkit-scrollbar-thumb {
     background-color: transparent; /* 隐藏滚动条Thumb颜色 */
   }


        &::-webkit-scrollbar {
          width: 3px; // 宽度
          height: 10px; // 高度
         
        }

        &::-webkit-scrollbar-thumb {
          background: var(--blue-5, #E1E7EE); // 拇指的背景颜色
          border-radius: 5px; // 圆角
        }

        &::-webkit-scrollbar-track {
          background-color: #fff; // 轨道的背景颜色
          border-radius: 5px; // 圆角
        }

        scrollbar-width: thin; // Firefox
        -ms-overflow-style: none; // 隐藏IE滚动条

        &:hover {
          &::-webkit-scrollbar-thumb {
            background-color: #555; // 鼠标悬停时拇指的背景颜色
          }
        }

滚动条样式

.popoverList {
  height: 100px;
  overflow: auto;
}

/* WebKit浏览器（如Chrome和Safari）的滚动条样式 */
.popoverList::-webkit-scrollbar {
  width: 5px;
  /* 设置垂直滚动条的宽度 */
  height: 5px;
  /* 设置水平滚动条的高度 */
}

/* WebKit浏览器（如Chrome和Safari）的滚动条滑块样式 */
.popoverList::-webkit-scrollbar-thumb {
  background-color: var(--blue-4, #B6C1CF);
  /* 设置滚动条的颜色 */
  border-radius: 3px;
  /* 设置滚动条的圆角 */
}
或

/* WebKit浏览器（如Chrome和Safari）的滚动条轨道样式 */
&::-webkit-scrollbar-track {
  background: none;
  /* 隐藏滚动条的轨道 */
}

/* WebKit浏览器（如Chrome和Safari）的滚动条样式 */
&::-webkit-scrollbar {
  width: 5px;
  /* 设置垂直滚动条的宽度 */
  height: 5px;
  /* 设置水平滚动条的高度 */
}

/* WebKit浏览器（如Chrome和Safari）的滚动条滑块样式 */
&::-webkit-scrollbar-thumb {
  background-color: var(--blue-4, #B6C1CF);
  /* 设置滚动条的颜色 */
  border-radius: 3px;
  /* 设置滚动条的圆角 */
}

/* WebKit浏览器（如Chrome和Safari）的滚动条轨道样式 */
&::-webkit-scrollbar-track {
  background: none;
  /* 隐藏滚动条的轨道 */
}