/* 仅在手机端和平板端生效 */ @media (max-width: 849px) { .swipe-video-row { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-bottom: 15px; scrollbar-width: none; /* 隐藏滚动条 */ } .swipe-video-row::-webkit-scrollbar { display: none; /* 隐藏苹果/谷歌浏览器的滚动条，更美观 */ } .swipe-video-row > .col { flex: 0 0 85% !important; /* 手机端每个视频占屏幕 85% 宽度，故意露出一点点下一个视频，引导用户滑动 */ max-width: 85% !important; scroll-snap-align: center; } }

/* 1. 安全修改外层 Row，开启横向滑动，但不破坏内部结构 */ .row.smooth-products { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-bottom: 20px; scrollbar-width: none; /* 隐藏火狐滚动条 */ cursor: grab; /* 电脑端鼠标放上去变成“小手”图标，提示可以抓取 */ } /* 电脑端鼠标按住时，变成“抓紧”的小手图标 */ .row.smooth-products:active { cursor: grabbing; } /* 隐藏谷歌/苹果浏览器的滚动条 */ .row.smooth-products::-webkit-scrollbar { display: none; } /* 2. 精准定义电脑、平板、手机的宽度 */ /* — 电脑端：同时显示4个 — */ @media (min-width: 850px) { .row.smooth-products > .col { flex: 0 0 25% !important; max-width: 25% !important; scroll-snap-align: start; } } /* — 平板端：同时显示3个 — */ @media (min-width: 550px) and (max-width: 849px) { .row.smooth-products > .col { flex: 0 0 33.33% !important; max-width: 33.33% !important; scroll-snap-align: start; } } /* — 手机端：显示1大半，露出下一个引导滑动 — */ @media (max-width: 549px) { .row.smooth-products > .col { flex: 0 0 75% !important; max-width: 75% !important; scroll-snap-align: center; } } // 3. 添加电脑端鼠标“按住拖拽”滑动的功能 document.addEventListener(“DOMContentLoaded”, function() { const sliders = document.querySelectorAll(‘.row.smooth-products’); let isDown = false; let startX; let scrollLeft; sliders.forEach(slider => { slider.addEventListener(‘mousedown’, (e) => { isDown = true; startX = e.pageX – slider.offsetLeft; scrollLeft = slider.scrollLeft; // 拖拽时暂时取消磁吸效果，让拖拽更丝滑 slider.style.scrollSnapType = ‘none’; }); slider.addEventListener(‘mouseleave’, () => { isDown = false; slider.style.scrollSnapType = ‘x mandatory’; // 鼠标离开恢复磁吸 }); slider.addEventListener(‘mouseup’, () => { isDown = false; slider.style.scrollSnapType = ‘x mandatory’; // 鼠标松开恢复磁吸 }); slider.addEventListener(‘mousemove’, (e) => { if (!isDown) return; // 如果没按住鼠标，什么都不做 e.preventDefault(); // 防止拖拽时误选中文本或图片 const x = e.pageX – slider.offsetLeft; const walk = (x – startX) * 1.5; // 滑动速度倍率，1.5倍比较跟手 slider.scrollLeft = scrollLeft – walk; }); }); });