滚动条

CSS

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>纵向比例滚动（带比例滚动条+进度感知）</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: Arial, sans-serif; padding: 20px; background-color: #f5f7fa; }
    
    .comparison-container {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      padding: 20px 0;
      min-height: 650px;
    }

    .scroll-demo {
      width: 380px;
      flex-shrink: 0;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      overflow: hidden;
    }

    .demo-header {
      padding: 15px;
      border-bottom: 1px solid #eee;
      background: #f8f9fa;
    }

    .demo-header h3 {
      font-size: 16px;
      color: #2c3e50;
      margin-bottom: 10px;
    }

    .control-buttons {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }

    .scroll-btn {
      padding: 6px 12px;
      border: 1px solid #ddd;
      background: white;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      transition: all 0.2s;
    }

    .scroll-btn:hover {
      background: #e9ecef;
    }

    /* 滚动进度条 */
    .progress-container {
      height: 4px;
      background: #f0f0f0;
      margin: 10px 0;
      border-radius: 2px;
      overflow: hidden;
    }

    .progress-bar {
      height: 100%;
      background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
      width: 0%;
      transition: width 0.1s;
    }

    .scroll-info {
      font-size: 12px;
      color: #64748b;
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
    }

    .scroll-content {
      height: 500px;
      overflow-y: auto;
      padding: 0;
      /* 确保滚动条比例正确计算 */
      position: relative;
    }

    .data-item {
 ...