当前位置：首页 > news >正文

横向滚动上方列表查看进度条变化

news 2026/6/28 16:08:45

<!DOCTYPEhtml><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>横向滚动列表与进度条</title><style>.container{width:80vw;margin:10px auto;box-sizing:border-box;}.list{width:80vw;height:100px;display:flex;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;/* Firefox */-ms-overflow-style:none;/* IE/Edge */}.list::-webkit-scrollbar{display:none;/* Chrome/Safari/Opera */}.item{width:100px;height:100px;background-color:#4CAF50;color:white;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:bold;flex-shrink:0;border:1px solid #45a049;box-sizing:border-box;}.item:nth-child(even){background-color:#2196F3;}.item:nth-child(3n){background-color:#FF9800;}.progress-container{width:40vw;height:40px;margin:20px auto;position:relative;background-color:#e0e0e0;border-radius:5px;}.progress-box{width:10vw;height:100%;position:absolute;left:0;top:0;background-color:#f44336;border-radius:5px;transition:left0.1s ease-out;}.scroll-indicator{text-align:center;margin-top:10px;color:#666;font-size:14px;}</style></head><body><divclass="container"><divclass="list"id="listContainer"><divclass="item">Item1</div><divclass="item">Item2</div><divclass="item">Item3</div><divclass="item">Item4</div><divclass="item">Item5</div><divclass="item">Item6</div><divclass="item">Item7</div><divclass="item">Item8</div><divclass="item">Item9</div><divclass="item">Item10</div></div><divclass="progress-container"id="progressContainer"><divclass="progress-box"id="progressBox"></div></div><divclass="scroll-indicator">横向滚动上方列表查看进度条变化</div></div><script>document.addEventListener('DOMContentLoaded',function(){constlistContainer=document.getElementById('listContainer');constprogressBox=document.getElementById('progressBox');constprogressContainer=document.getElementById('progressContainer');// 设置进度条容器的宽度constcontainerWidth=progressContainer.offsetWidth;constprogressBarWidth=progressBox.offsetWidth;constmaxScrollLeft=listContainer.scrollWidth-listContainer.offsetWidth;// 总可滚动距离// 监听滚动事件listContainer.addEventListener('scroll',function(){// 计算滚动比例 (0 到 1)constscrollRatio=listContainer.scrollLeft/maxScrollLeft;// 计算进度条应移动的距离// 进度条的最大移动距离是容器宽度减去自身宽度constmaxProgressMove=containerWidth-progressBarWidth;constprogressPosition=scrollRatio*maxProgressMove;// 应用位置progressBox.style.left=`${progressPosition}px`;});// 初始化进度条位置progressBox.style.left='0px';});</script></body></html>

效果

这段 HTML + CSS + JavaScript 代码实现了一个横向滚动列表，并配合一个水平进度条来反映用户滚动的位置。下面从整体结构和核心逻辑两个方面进行解释。

🧩 整体结构说明

1.HTML 结构

.list：一个横向可滚动的容器，包含多个.item元素（共10个）。
.progress-container：一个固定宽度的灰色背景容器，用于显示进度条。
.progress-box：红色小方块，作为“进度指示器”，会随着滚动位置左右移动。

2.CSS 样式重点

.list设置了overflow-x: auto和scroll-behavior: smooth，使其可以横向平滑滚动，并隐藏滚动条（通过各浏览器兼容写法）。
.item使用flex-shrink: 0确保不会被压缩，保持固定宽度。
.progress-box使用position: absolute定位在.progress-container内部，通过修改left值来移动。

⚙️ 核心逻辑解析（JavaScript 部分）

1.获取关键 DOM 元素

constlistContainer=document.getElementById('listContainer');constprogressBox=document.getElementById('progressBox');constprogressContainer=document.getElementById('progressContainer');

2.计算基础尺寸

constcontainerWidth=progressContainer.offsetWidth;// 进度条容器宽度（例如 40vw）constprogressBarWidth=progressBox.offsetWidth;// 进度条自身宽度（例如 10vw）constmaxScrollLeft=listContainer.scrollWidth-listContainer.offsetWidth;

maxScrollLeft是列表最多能向右滚动的距离（总内容宽度 - 可视区域宽度）。

3.监听滚动事件

listContainer.addEventListener('scroll',function(){constscrollRatio=listContainer.scrollLeft/maxScrollLeft;constmaxProgressMove=containerWidth-progressBarWidth;constprogressPosition=scrollRatio*maxProgressMove;progressBox.style.left=`${progressPosition}px`;});

🔍 关键公式：

滚动比例：
scrollRatio = 当前滚动距离 / 最大可滚动距离
→ 范围是0 ~ 1（未滚动到滚到底）。
进度条最大移动距离：
maxProgressMove = 容器宽度 - 进度条自身宽度
→ 因为进度条不能移出容器右边。
进度条当前位置：
progressPosition = scrollRatio × maxProgressMove
→ 将滚动比例映射到进度条的移动范围。