移动端浏览器CSS gap属性为横向滚动容器末元素额外添加间距问题

• 核心是移动端浏览器flex布局gap属性的兼容bug：部分移动端内核未遵循标准实现，错误地在flex容器的最后一个子元素后方额外追加了gap间距，导致容器实际可滚动宽度比你预期的（元素数*200 + (元素数-1)*5）多出5px，滚动时就会出现空白段。
• 代码隐含的逻辑问题：滚动步长硬编码为205，未做滚动边界校验，加上resizeController函数存在两处笔误（ScrollLeft大小写错误、判断语句写成赋值语句），再叠加移动端高DPI屏幕的小数像素偏移，共同导致了scrollLeft表现不符合预期。

1. 替换gap属性彻底解决兼容问题 #

放弃使用gap实现间距，改用子元素外边距实现，完全规避不同浏览器的gap实现差异：

#topics {
    display: inherit;
    /* 移除原有gap:5px属性 */
    overflow:hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
}
.adItem {
    position: relative;
    margin-right: 5px;
}
/* 最后一个元素移除右外边距，避免末尾多出空白 */
.adItem:last-child {
    margin-right: 0;
}

2. 修复代码逻辑问题 #

修复resizeController函数的笔误 #

function resizeController() {
    adControl.style.maxWidth = "";
    var elementWidth = adControl.offsetWidth;
    // 修正ScrollLeft为小写scrollLeft
    var scroll = adControl.scrollLeft;
    var itemNo = (Math.floor(elementWidth / 200))
    if (itemNo > 3) {
        itemNo = 3  
    };
    var newWidth = (itemNo*200);
    newWidth = newWidth+(5*itemNo) 
    
    adControl.style.maxWidth = (newWidth + "px");
    // 修正赋值运算符为全等判断
    if (currentNo === itemNo) {
        adControl.scrollLeft = scroll;
    } 
};

增加滚动边界校验，避免滚动超限 #

修改Scroll函数，增加最大最小滚动距离限制，防止滚动超出容器范围：

function Scroll(n) {
    if (LastClick >= (Date.now() - Delay)) {
        return;
    }
    // 计算容器最大可滚动距离
    const maxScroll = adControl.scrollWidth - adControl.clientWidth;
    let targetScroll = adControl.scrollLeft + n * 205;
    // 限制滚动范围在0到maxScroll之间
    targetScroll = Math.max(0, Math.min(targetScroll, maxScroll));
    adControl.scrollLeft = targetScroll;
    checkPos();
    LastClick = Date.now();
    console.log(adControl.scrollLeft);
};

3. 可选优化：动态计算滚动步长 #

如果后续需要调整元素尺寸或间距，避免硬编码步长出错，可以在页面加载或窗口resize时动态计算步长：

let scrollStep = 0;
// 页面加载和resize时调用该函数计算步长
function calcScrollStep() {
    const firstItem = document.querySelector('.adItem');
    const itemStyle = getComputedStyle(firstItem);
    scrollStep = firstItem.offsetWidth + parseInt(itemStyle.marginRight || 0);
}
// Scroll函数中用scrollStep替换硬编码的205即可

内容的提问来源于stack exchange，提问作者Myronaz