css滚动条上角和下角不变

CSS滚动条上角和下角不变是指在一个具有滚动条的元素中，滚动条的上角和下角的样式保持不变，不受滚动条滚动时的影响。

滚动条上角和下角通常指的是滚动条的两端，即滚动条的顶部和底部。在默认情况下，滚动条的上角和下角的样式会随着滚动条的滚动而改变，以提供视觉上的反馈。

要实现滚动条上角和下角不变的效果，可以使用CSS的伪元素(::before和::after)来创建一个覆盖在滚动条上角和下角的元素，并设置其样式为固定的。具体的实现步骤如下：

首先，给具有滚动条的元素添加一个自定义的类名，例如"custom-scrollbar"。
使用CSS选择器选中该元素，并设置其样式为"overflow: auto;"，以显示滚动条。
使用伪元素(::before和::after)来创建两个覆盖在滚动条上角和下角的元素。

.custom-scrollbar {
  overflow: auto;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 10px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #888;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

.custom-scrollbar::-webkit-scrollbar-corner::before,
.custom-scrollbar::-webkit-scrollbar-corner::after {
  content: "";
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  background-color: #888;
}

.custom-scrollbar::-webkit-scrollbar-corner::before {
  left: 0;
}

.custom-scrollbar::-webkit-scrollbar-corner::after {
  right: 0;
}

在上述代码中，我们使用了::-webkit-scrollbar-corner::before和::-webkit-scrollbar-corner::after来创建了两个覆盖在滚动条上角和下角的元素，并设置其样式为固定的。你可以根据需要自定义这两个元素的样式。

这样，无论滚动条如何滚动，滚动条的上角和下角的样式都会保持不变。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。