css滚动条外层轨道颜色不对,滚动条滚动时显示，不滚动时隐藏

要更改滚动条外层轨道颜色，可以使用以下 CSS 代码：

/* 更改滚动条轨道颜色 */
::-webkit-scrollbar-track {
  background-color: #ccc; /* 更改为你想要的颜色 */
}

/* 让滚动条在滚动时显示，不滚动时隐藏 */
::-webkit-scrollbar {
  width: 8px; /* 设置滚动条宽度 */
}

::-webkit-scrollbar-thumb {
  background-color: #999; /* 更改为你想要的颜色 */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #666; /* 更改为你想要的颜色 */
}

body {
  overflow-y: scroll; /* 让body元素滚动 */
  scrollbar-width: thin; /* Firefox浏览器需要添加的代码 */
  scrollbar-color: #999 #ccc; /* Firefox浏览器需要添加的代码，更改为你想要的颜色 */
}

这样设置后，滚动条在滚动时会显示，不滚动时会隐藏，滚动条轨道颜色也会更改为你想要的颜色。

相关问题

滚动条滚动时显示，不滚动时隐藏

您可以使用JavaScript监听滚动事件，当滚动条滚动时，添加一个CSS类来显示滚动条，当滚动停止时，移除该CSS类来隐藏滚动条。以下是一个示例代码段：

var scrollTimeout;

// 监听滚动事件
window.addEventListener('scroll', function() {
  // 当滚动时添加CSS类来显示滚动条
  document.body.classList.add('show-scroll');

  // 清除之前的定时器
  clearTimeout(scrollTimeout);

  // 设置一个新的定时器，在停止滚动后隐藏滚动条
  scrollTimeout = setTimeout(function(){
    document.body.classList.remove('show-scroll');
  }, 500);
});

在上面的代码中，我们使用setTimeout()函数来设置一个定时器，在滚动停止后500毫秒后隐藏滚动条。您可以根据需要调整超时时间。另外，我们使用CSS类来控制滚动条的显示和隐藏。您需要编写相应的CSS样式来实现该效果。

css隐藏滚动条 鼠标悬停时显示

可以使用CSS的伪类选择器来实现隐藏滚动条，具体代码如下：

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

当鼠标悬停在滚动区域时，可以使用以下代码来显示滚动条：

::-webkit-scrollbar:hover {
    display: block;
}