移动端浏览器中客户评价卡片垂直滚动按钮功能失效求助

看起来你在移动端的客户评价卡片滚动功能上遇到了头疼的问题，桌面端顺畅但安卓浏览器（比如三星Chrome）要么滚动不顺畅要么直接失效，我来帮你梳理几个可能的解决方向：

1. 解决移动端平滑滚动兼容性问题 #

部分安卓浏览器对scrollBy的behavior: 'smooth'支持不够友好，你可以做个兼容性判断，不支持平滑滚动的话用手动动画来模拟：

function scrollVertically(direction) {
    const scrollHeight = cardWrapper.scrollHeight;
    const clientHeight = cardWrapper.clientHeight;
    const currentScrollPosition = cardWrapper.scrollTop;
    const scrollStep = direction === 1 ? -scrollAmount : scrollAmount;

    // 检查浏览器是否支持平滑滚动
    if ('scrollBehavior' in document.documentElement.style) {
        cardWrapper.scrollBy({
            top: scrollStep,
            behavior: 'smooth'
        });
    } else {
        // 手动实现平滑滚动
        let targetScroll = currentScrollPosition + scrollStep;
        // 限制滚动范围
        targetScroll = Math.max(0, Math.min(targetScroll, scrollHeight - clientHeight));
        const scroll = () => {
            const diff = targetScroll - cardWrapper.scrollTop;
            if (Math.abs(diff) < 1) {
                cardWrapper.scrollTop = targetScroll;
                return;
            }
            cardWrapper.scrollTop += diff * 0.1;
            requestAnimationFrame(scroll);
        };
        requestAnimationFrame(scroll);
    }

    setTimeout(updateScrollButtons, 300);
}

2. 调整容器overflow设置，隐藏滚动条同时保留滚动功能 #

你之前把overflow-y从hidden改成auto会出现滚动条，其实可以通过CSS隐藏滚动条，这样既保留原生滚动能力，又不影响美观：

.card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    height: 650px;
    overflow-y: auto; /* 改成auto */
    position: relative;
    /* 隐藏滚动条 */
    -ms-overflow-style: none;  /* IE 和 Edge */
    scrollbar-width: none;  /* Firefox */
}
/* Chrome、Safari 和 Opera */
.card-wrapper::-webkit-scrollbar {
    display: none;
}

@media(max-width:768px){
    .card-wrapper{
        height: 500px;
    }
    /* 移动端同样应用隐藏滚动条样式 */
}

这样设置后，用户既可以通过按钮控制滚动，也能手动触摸滚动，而且看不到滚动条，完美解决你之前的顾虑。

3. 确保移动端scrollAmount正确生效 #

你提到设置了let scrollAmount = window.innerWidth < 768 ? 50 : 100;，但看你的代码里初始值是let scrollAmount = 100;，要把这个判断放到DOMContentLoaded回调里替换初始值：

document.addEventListener('DOMContentLoaded', function () {
    const cardWrapper = document.querySelector('.card-wrapper');
    const btnScrollUp = document.getElementById('btn-scroll-up');
    const btnScrollDown = document.getElementById('btn-scroll-down');

    // 正确设置移动端的滚动距离
    let scrollAmount = window.innerWidth < 768 ? 50 : 100;

    // ... 其他代码
});

4. 优化触摸事件的响应 #

你添加了touchstart事件，但可以尝试加上preventDefault避免浏览器默认触摸行为干扰，同时确保事件绑定正确：

btnScrollUp.addEventListener('touchstart', (e) => {
    e.preventDefault();
    scrollVertically(1);
});
btnScrollDown.addEventListener('touchstart', (e) => {
    e.preventDefault();
    scrollVertically(-1);
});

另外，移动端按钮可能存在点击延迟，你可以给按钮添加touch-action: manipulation的CSS属性，优化触摸响应：

.btn-scroll {
    font-size: 2rem;
    outline: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    background: var(--primary-color);
    transition: .3s all ease;
    touch-action: manipulation; /* 优化触摸响应 */
}

5. 调整按钮状态更新时机 #

你用了setTimeout(updateScrollButtons, 300)来更新按钮显示状态，移动端的滚动动画时长可能和桌面端不同，建议用requestAnimationFrame监听滚动结束，或者延长一点延迟时间（比如400ms），确保滚动完全结束后再更新按钮状态。

你可以把这些调整逐个试试，应该能解决移动端滚动不顺畅或者失效的问题！

备注：内容来源于stack exchange，提问作者techie_afrohead