css中怎么设置滚动条位置不变

在 CSS 中，我们经常需要添加滚动条以便用户滚动查看更多内容。但是在某些情况下，我们可能希望滚动条的位置固定，不随内容的增长而改变。这个时候我们可以使用 CSS 的 overflow 和 position 属性来实现。
通过设置 overflow 属性为 hidden，可以隐藏滚动条。同时，设置 position 为 fixed，就可以固定滚动条的位置不变。以下代码演示了具体实现：

p {
  width: 200px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

p::before {
  content: "";
  width: 10px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #ccc;
}

p::-webkit-scrollbar { /* WebKit browsers */
  width: 7px;
  background: transparent;
}

p::-webkit-scrollbar-thumb { /* WebKit browsers */
  background: #888;
} 

在上面的代码中，我们首先设置了一个固定的宽度和高度的 p 标签，再将 overflow 属性设置为 hidden，使得文本内容超出高度后就会被隐藏。为了创建一个自定义的滚动条，我们使用了一个伪元素 ::before 来模拟滚动条，并将其设置为绝对定位。接着，我们对伪元素定制滚动条的样式，包括宽度、背景颜色等。此外，我们还使用了 ::-webkit-scrollbar 和 ::-webkit-scrollbar-thumb 属性来设置兼容 WebKit 浏览器的滚动条样式。
总之，通过利用 overflow 和 position 属性，我们可以创建一个固定位置的滚动条，适用于某些特殊的 UI 设计需求。