滚动条样式的自定义实例页面

展示

代码

• HTML：

  <h4 class="fill">窄滚动条</h4>
  <div class="scroll scroll-thin">
      <p>根据测试，窄滚动条在Windows操作系统中占据的宽度是8px。</p>
      <p>测试方法很简单，滚动容器的宽度减去子元素的宽度即可。</p>
      <p>打开控制台，审查对应的元素，就可以看到容器的宽度和子元素的宽度，两者相互减，就是滚动条的宽度了。</p>
  </div>
  
  <h4 class="fill">无滚动条-可滚动</h4>
  <div class="scroll scroll-none">
      <p>根据测试，窄滚动条在Windows操作系统中占据的宽度是8px。</p>
      <p>测试方法很简单，滚动容器的宽度减去子元素的宽度即可。</p>
      <p>打开控制台，审查对应的元素，就可以看到容器的宽度和子元素的宽度，两者相互减，就是滚动条的宽度了。</p>
  </div>

• CSS：

  .scroll {
      border: 1px solid #665;
      height: 150px;
      overflow: auto;
      --thumb-color: #bbb;
      --track-color: #ddd;
  }
  .scroll-thin {
      scrollbar-width: thin;
      scrollbar-color: var(--thumb-color) var(--track-color);
  }
  .scroll-none {
      scrollbar-width: none;
  }
  .scroll-thin::-webkit-scrollbar {
      width: 8px; height: 8px;
  }
  .scroll-thin::-webkit-scrollbar-thumb {
      background-color: var(--thumb-color);
  }
  .scroll-thin::-webkit-scrollbar-track {
      background-color: var(--track-color);
  }
  .scroll-none::-webkit-scrollbar {
      width: 0; height: 0;
  }