需求
移动端盒子元素实现左右可滑动且竖向页面可滑动，即盒子内部元素左右可滑动，上下拖动盒子可以滑动整个页面
代码
关键代码，盒子横向： 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>