时间戳

首页 > 解决方案 > 我想改变水平滚动条css

html - 我想改变水平滚动条css

问题描述

我想更改水平滚动条 css。在这里我使用代码来改变它，但它也改变了我的垂直滚动条，我只想改变水平滚动条。怎么做？在这里我也上传图片。

::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
  background: #888; 
}
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

在此处输入图像描述

标签： htmlcssscrollbar

解决方案

尝试这个

div {
  width: 400px;
  overflow-x: auto;
  white-space: nowrap;
}

div::-webkit-scrollbar {
  width: 1em;
}

div::-webkit-scrollbar-track {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

div::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #00bd86;
  outline: 2px solid slategrey;
}

div::-webkit-scrollbar:vertical {
  display: none;
}
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into</div>

推荐阅读