主页 / 问题 / 1228315
Accepted
Yaroslav Morokhovets
Asked:2022-01-08 00:14:35 +0800 CST2022-01-08 00:14:35 +0800 CST

如何使滚动条比滑块更薄？

  • 772

在此处输入图像描述

你必须像图片中那样做。

试图只是减少带宽。我还尝试将框架设置为透明。

html5

1 个回答

  1. Best Answer

    以下是如何制作这样一个滚动条的示例：

    #page {
    width: 50%;
    height: 200px;
    z-index: 30;
    border: 2px solid rgb(0, 255, 0);
    border-radius: 10px;
    padding: 10px;
    overflow-y: hidden;
    overflow-x: hidden;
}

#block{
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

#block::-webkit-scrollbar {
    width: 5px;
}

#block::-webkit-scrollbar-track {
    background: rgb(255,0,0);
    border: 1px solid transparent;
    background-clip: content-box;
}

#block::-webkit-scrollbar-thumb {
    background: rgb(0,0,255);
    border: 1px solid rgb(0,0,0);
}
    <div id="page">
  <div id="block">
   <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text textt text text text text text</p>
  </div>
</div>

    我专门选择了颜色来显示哪条线负责什么。如果你愿意，我想你会弄清楚在哪里插入你的颜色。祝你好运 ：）

    • 2

相关问题