如何隐藏水平滚动条并保持垂直滚动条可见，同时仍然可以水平滚动？

要隐藏水平滚动条并保持垂直滚动条可见，同时仍然可以水平滚动，可以使用CSS来实现。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hide Horizontal Scrollbar</title>
    <style>
        .container {
            width: 100%;
            overflow-x: auto; /* 允许水平滚动 */
            overflow-y: visible; /* 垂直滚动条可见 */
        }
        .content {
            width: 200%; /* 示例内容宽度大于容器宽度 */
            height: 200px;
            background-color: lightgray;
        }
        .container::-webkit-scrollbar {
            height: 10px; /* 垂直滚动条高度 */
        }
        .container::-webkit-scrollbar-thumb {
            background-color: darkgray;
        }
        .container::-webkit-scrollbar-track {
            background-color: lightgray;
        }
        .container::-webkit-scrollbar-button {
            display: none; /* 隐藏滚动条按钮 */
        }
        .container::-webkit-scrollbar-corner {
            background-color: transparent; /* 隐藏角落的滚动条 */
        }
        .container::-webkit-scrollbar-track-piece {
            background-color: transparent; /* 隐藏滚动条轨道 */
        }
        .container::-webkit-scrollbar-thumb:hover {
            background-color: gray;
        }
        .container::-webkit-scrollbar-thumb:active {
            background-color: darkgray;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content"></div>
    </div>
</body>
</html>

解释

.container:
- overflow-x: auto;: 允许水平滚动。
- overflow-y: visible;: 垂直滚动条可见。

.container::-webkit-scrollbar:
- 这些伪元素用于自定义滚动条的样式。
- height: 10px;: 设置垂直滚动条的高度。
- ::-webkit-scrollbar-thumb: 设置滚动条滑块的样式。
- ::-webkit-scrollbar-track: 设置滚动条轨道的样式。
- ::-webkit-scrollbar-button: 隐藏滚动条按钮。
- ::-webkit-scrollbar-corner: 隐藏角落的滚动条。
- ::-webkit-scrollbar-track-piece: 隐藏滚动条轨道。