CSS scrollbar-color 和 scrollbar-gutter 现已成为基准规范

您可以使用 scrollbar-color 属性更改滚动条的颜色。您可以指定滑块的颜色以及与其关联的颜色轨道。使用 scrollbar-width，您可以选择使用更窄的滚动条，甚至可以完全隐藏滚动条，而不会影响滚动性。

HTML

<main>
  <h1>Styling Scrollbars</h1>
  <div class="warning">Your browser does not support <code>scrollbar-color</code> or <code>scrollbar-width</code>.</div>
  <div class="scroller">
    <div class="content">
      <p>CSS, short for Cascading Style Sheets, is a programming language that is used to describe the presentation or visual layout of a document written in HTML. It acts as a styling tool and enables web developers to control the appearance of their websites or web pages by specifying how different elements should be displayed on the screen. CSS allows designers to define various aspects such as font styles, colors, spacing between elements, background images, and much more.</p>
      <p>The term "cascading" in CSS refers to its ability to apply multiple stylesheets simultaneously and prioritize them based on their importance or specificity. This feature allows developers to create consistent designs across multiple web pages by defining common styles in an external stylesheet which can then be linked to all relevant HTML documents. Additionally, CSS makes it easy to update the design of an entire website by simply modifying one central stylesheet rather than having to manually edit each individual webpage.</p>
      <p>CSS can be applied directly within an HTML document using inline stylesheets or internally through embedded stylesheets within the head section of a page. However, it is considered best practice and more efficient from both maintenance and performance perspectives to use external style sheets stored separately in .css files which are then referenced within HTML documents.</p>
      <p>One important concept in CSS is selectors. Selectors allow you to target specific elements within your HTML markup so that you can apply different styles only where needed. Selectors can target tags (e.g., p, div), classes (e.g., .header), IDs (e.g., #main), attributes (e.g., [type="submit"]), pseudo-classes (e.g., :hover) and many other properties of DOM elements.</p>
      <p>Overall, CSS plays a crucial role in modern web development as it provides great flexibility and control over how content looks on websites. By separating style from structure with this powerful language, developers are able to create visually appealing websites while maintaining clean code that adheres to best practices for web accessibility and user experience.</p>
    </div>
  </div>
  <div class="controls">
    <label for="scrollbar-color-thumb">Thumb Color</label>
    <input type="color" id="scrollbar-color-thumb" value="#FF69B4">
    <label for="scrollbar-color-track">Track Color</label>
    <input type="color" id="scrollbar-color-track" value="#0000FF">
  </div>
  <div class="controls">
    <span>Scrollbar-width: </span>
    <label><input type="radio" name="width" value="auto" checked> auto</label>
    <label><input type="radio" name="width" value="thin"> thin</label>
    <label><input type="radio" name="width" value="none"> none</label>
  </div>
  </div>
</main>

CSS

.scroller {
  --scrollbar-color-track: #0000ff;
  --scrollbar-color-thumb: #ff69b4;
  --scrollbar-width: auto;
}

@supports ((scrollbar-width: auto) and (scrollbar-width: auto)) {
  .scroller {
    scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
    scrollbar-width: var(--scrollbar-width);
  }

  .warning {
    display: none;
  }
}

.scroller {
  border: 1px solid #000;
  width: 100%;
  height: 50vh;

  position: relative;
  container-type: inline-size;

  &:has(.content) {
    background: white;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .content {
    min-height: 75vh;
    padding: 1rem 1rem;

    *:first-child {
      margin-top: 0;
    }
    *:last-child {
      margin-bottom: 0;
    }
  }
}

@layer base {
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

  html {
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 20px;
  }

  body {
    display: grid;
    place-content: safe center;
  }

  main {
    max-width: 40em;
    width: 90vw;
  }

  h1 {
    text-align: center;
  }

  .controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0 0;
  }
}

@layer warning {
  .warning {
    box-sizing: border-box;
    padding: 1em;
    margin: 1em 0;
    border: 1px solid #ccc;
    background: rgba(255 255 205 / 0.8);
  }

  .warning > :first-child {
    margin-top: 0;
  }

  .warning > :last-child {
    margin-bottom: 0;
  }

  .warning a {
    color: blue;
  }
  .warning--info {
    border: 1px solid #123456;
    background: rgb(205 230 255 / 0.8);
  }
  .warning--alarm {
    border: 1px solid red;
    background: #ff000010;
  }
}

JS

document.querySelectorAll('[type="color"]').forEach(($input) => {
  $input.addEventListener("change", (e) => {
    document
      .querySelector(".scroller")
      .style.setProperty(`--${$input.getAttribute("id")}`, $input.value);
  });
});

document.querySelectorAll('[name="width"]').forEach(($input) => {
  $input.addEventListener("change", (e) => {
    document
      .querySelector(".scroller")
      .style.setProperty("--scrollbar-width", $input.value);
  });
});