移动端盒子元素实现左右可滑动且竖向页面可滑动，即盒子内部元素左右可滑动，上下拖动盒子可以滑动整个页面
关键代码，盒子横向： 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>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。