如何制作横向滚动条美化效果_html横向滚动条美化实现教程

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何制作横向滚动条美化效果_html横向滚动条美化实现教程

2025-11-18

浏览次数：次

返回列表

首先通过HTML结构搭建横向滚动容器，再利用CSS的flex布局和overflow-x属性实现滚动功能，接着使用Webkit伪元素自定义滚动条样式，最后考虑兼容性与交互增强。具体步骤包括：1. 创建包含滚动内容的容器；2. 用flex布局使子元素横向排列并设置溢出滚动；3. 通过::-webkit-scrollbar系列伪元素美化滚动条轨道和滑块；4. 针对非Webkit浏览器采用降级方案或第三方库提升一致性。关键在于结构清晰、样式可控且兼顾多端体验。

如何制作横向滚动条美化效果_html横向滚动条美化实现教程

想要让网页中的横向滚动条更美观，不能只靠默认样式。通过CSS可以轻松实现自定义的横向滚动条美化效果，尤其适用于内容区域较长、需要水平滑动的场景，比如图片画廊、时间轴或数据表格。下面教你一步步实现简洁现代的横向滚动条美化方案。

1. 基础HTML结构搭建

首先准备一个包含横向滚动内容的容器。使用一个外层

包裹可滚动的内容，确保内容宽度超出容器以触发滚动。

示例代码：

<div class="scroll-container">
  <div class="scroll-content">
    <p>项目 1</p>
    <p>项目 2</p>
    <p>项目 3</p>
    <p>项目 4</p>
    <p>项目 5</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2294">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/175712858367437.png" alt="ChatCut">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2294">ChatCut</a>
                            <p>AI视频剪辑工具</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="ChatCut">
                                <span>1086</span>
                            </div>
                        </div>
                        <a href="/ai/2294" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="ChatCut">
                        </a>
                    </div>
                
  </div>
</div>

其中，scroll-container 是可视区域，设置固定宽度并隐藏溢出；scroll-content 内部元素横向排列，总宽度超过容器即可滚动。

2. 设置横向滚动行为

为了让内容横向排列并允许滚动，使用CSS的 flex 布局和 overflow-x 属性。

.scroll-container {
  width: 100%;
  max-width: 600px;
  overflow-x: auto;
  white-space: nowrap;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 20px auto;
}
<p>.scroll-content {
display: flex;
gap: 16px;
padding: 16px;
}</p>

overflow-x: auto 启用横向滚动条
display: flex 让子元素水平排列
gap 控制项目间距
去掉 white-space: nowrap 如果使用flex布局则非必需

3. 美化滚动条样式（Webkit内核浏览器）

CSS 提供了针对 Webkit 浏览器（Chrome、Edge、Safari）的伪元素来定制滚动条外观。

/* 整体滚动条 */
.scroll-container::-webkit-scrollbar {
  height: 8px;
}
<p>/<em> 滚动条轨道 </em>/
.scroll-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}</p><p>/<em> 滚动条滑块 </em>/
.scroll-container::-webkit-scrollbar-thumb {
background: #007acc;
border-radius: 4px;
}</p><p>/<em> 滑块悬停状态 </em>/
.scroll-container::-webkit-scrollbar-thumb:hover {
background: #005fa3;
}</p>