CSS：-webkit-scrollbar禁用双按钮

在 CSS 中，你可以使用 ::-webkit-scrollbar 伪元素来自定义 WebKit 浏览器（如 Chrome 和 Safari）中的滚动条样式。要禁用滚动条上的双按钮（即滚动条两端的向上/向下或向左/向右按钮），你可以使用 ::-webkit-scrollbar-button 伪元素并将其样式设置为 display: none。

以下是一个示例，展示如何禁用滚动条上的双按钮：

/* 隐藏滚动条上的双按钮 */
::-webkit-scrollbar-button {
    display: none;
}

/* 自定义滚动条的其他部分 */
::-webkit-scrollbar {
    width: 12px; /* 滚动条的宽度 */
    height: 12px; /* 滚动条的高度 */
}

::-webkit-scrollbar-thumb {
    background-color: #888; /* 滚动条滑块的颜色 */
    border-radius: 6px; /* 滚动条滑块的圆角 */
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* 滚动条轨道的颜色 */
}

解释

::-webkit-scrollbar-button：这个伪元素用于表示滚动条两端的按钮。将其 display 属性设置为 none 可以隐藏这些按钮。
::-webkit-scrollbar：这个伪元素用于表示整个滚动条。你可以设置滚动条的宽度和高度。
::-webkit-scrollbar-thumb：这个伪元素用于表示滚动条的滑块。你可以自定义滑块的颜色、圆角等样式。
::-webkit-scrollbar-track：这个伪元素用于表示滚动条的轨道。你可以自定义轨道的颜色等样式。

示例

以下是一个完整的示例，展示如何在一个包含滚动内容的容器上应用这些样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Scrollbar</title>
    <style>
        /* 隐藏滚动条上的双按钮 */
        ::-webkit-scrollbar-button {
            display: none;
        }

        /* 自定义滚动条的其他部分 */
        ::-webkit-scrollbar {
            width: 12px; /* 滚动条的宽度 */
            height: 12px; /* 滚动条的高度 */
        }

        ::-webkit-scrollbar-thumb {
            background-color: #888; /* 滚动条滑块的颜色 */
            border-radius: 6px; /* 滚动条滑块的圆角 */
        }

        ::-webkit-scrollbar-track {
            background-color: #f1f1f1; /* 滚动条轨道的颜色 */
        }

        /* 示例容器 */
        .scroll-container {
            width: 300px;
            height: 200px;
            overflow: auto;
            border: 1px solid #ccc;
        }

        .content {
            height: 600px;
            width: 600px;
            background: linear-gradient(to bottom, #ffcc00, #ff6600);
        }
    </style>
</head>
<body>
    <div class="scroll-container">
        <div class="content"></div>
    </div>
</body>
</html>

在这个示例中，.scroll-container 是一个包含滚动内容的容器。我们应用了自定义的滚动条样式，并隐藏了滚动条上的双按钮。你可以根据需要进一步自定义滚动条的样式。