移动端盒子元素实现左右可滑动且竖向页面可滑动

蓓蕾心晴

发布于 2025-09-10 08:30:24

11500

代码可运行

文章被收录于专栏：前端小叙前端小叙

运行总次数：0

代码可运行

需求

移动端盒子元素实现左右可滑动且竖向页面可滑动，即盒子内部元素左右可滑动，上下拖动盒子可以滑动整个页面

代码

关键代码，盒子横向： overflow-x: auto; 盒子竖向：overflow-y: hidden;

详细demo 代码如下：

<!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>
    /* 页面整体容器 */
    .page-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 15px;
      max-width: 100%;
    }

    /* 横向滚动区域 */
    .horizontal-scroll-section {
      width: 100%;
      height: 236px;
      display: flex;
      align-items: center;
      justify-content: flex-start;  
      touch-action: pan-x pan-y;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      gap: 10px;
      padding: 10px 0;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .horizontal-scroll-section.visible {
      display: flex;
    }
    .scroll-item {
      flex-shrink: 0;
      width: 132px;
      height: 200px;
      border-radius: 8px;
      object-fit: cover;
      background-color: #f4f4f4;
    }

    /* 新增的竖向滚动区域（与横向区域并列） */
    .vertical-scroll-section {
      width: 100%;
      height: 400px; /* 可自定义高度 */
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      padding: 15px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .vertical-content {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    .vertical-card {
      padding: 12px;
      border-radius: 6px;
      background-color: #f9f9f9;
      border: 1px solid #eee;
    }

    /* 滚动条美化 */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 3px;
    }
  </style>
</head>
<body>
  <div class="page-container">
    <h2>横向图片滚动</h2>
    <!-- 横向滚动区域 -->
    <div id="imageScrollContainer" class="horizontal-scroll-section">
      <!-- 图片通过JS动态添加 -->
    </div>

    <h2>竖向内容区域</h2>
    <!-- 竖向滚动区域（独立于横向区域） -->
    <div class="vertical-scroll-section">
      <div class="vertical-content">
        <!-- 竖向内容通过JS动态添加 -->
      </div>
    </div>
  </div>

  <script>
    // ===== 横向滚动数据 =====
    const imageData = [
      "https://picsum.photos/id/1018/300/400",
      "https://picsum.photos/id/1015/300/400",
      "https://picsum.photos/id/1019/300/400",
      "https://picsum.photos/id/1020/300/400",
      "https://picsum.photos/id/1021/300/400",
      "https://picsum.photos/id/1022/300/400"
    ];

    // 初始化横向滚动
    const horizontalContainer = document.getElementById('imageScrollContainer');
    if (imageData.length > 0) {
      horizontalContainer.classList.add('visible');
      imageData.forEach((url, index) => {
        const img = document.createElement('img');
        img.src = url;
        img.className = 'scroll-item';
        img.alt = `图片 ${index + 1}`;
        horizontalContainer.appendChild(img);
      });
    }

    // ===== 竖向滚动数据 =====
    const verticalContent = [
      "这是竖向滚动区域的第一段内容。你可以在这里放置任何HTML元素，比如文字、卡片等。",
      "<div class='vertical-card'><h3>分类标题1</h3><p>这里是分类1的详细描述内容，可以放多行文本。</p></div>",
      "<div class='vertical-card'><h3>分类标题2</h3><p>这里是分类2的详细描述内容，可以放多行文本。</p></div>",
      "<div class='vertical-card'><h3>分类标题3</h3><p>这里是分类3的详细描述内容，可以放多行文本。</p></div>",
      "更多文本内容...",
      "继续添加内容以测试滚动效果...",
      "最后一段内容"
    ];

    // 初始化竖向滚动
    const verticalContentContainer = document.querySelector('.vertical-content');
    verticalContent.forEach((content, index) => {
      const element = document.createElement('div');
      element.innerHTML = content;
      verticalContentContainer.appendChild(element);
    });
  </script>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-09-09，如有侵权请联系 cloudcommunity@tencent.com 删除

测试