滚动回弹效果在移动端如何实现？

Newb.彬丽提问于 2026-01-25 03:16:16 阅读 45

交互

最近在做一个移动端的项目，想要实现一个类似iOS上那种滚动到底部后会有个回弹的效果。尝试着用CSS的overscroll-behavior属性设置了，但是发现在安卓手机上表现不是很好，有的设备根本没反应。请问有其他方法可以兼容更多设备吗？

滚动效果

我来解答赞 15 收藏

反馈

1 条解答

UE丶艺茹 Lv1

CSS的overscroll-behavior确实不够稳定，尤其是安卓。建议直接用scroll事件配合JS来实现回弹效果，应该能用。

let startY = 0, moveY = 0, distance = 0;

const container = document.querySelector('.scroll-container');



container.addEventListener('touchstart', (e) => {

    startY = e.touches[0].pageY;

});



container.addEventListener('touchmove', (e) => {

    moveY = e.touches[0].pageY;

    distance = moveY - startY;

    

    if (container.scrollTop === 0 && distance > 0) {

        container.style.transform = translateY(${distance * 0.5}px);

    }

});



container.addEventListener('touchend', () => {

    container.style.transition = 'transform 0.3s ease-out';

    container.style.transform = 'translateY(0px)';

    setTimeout(() => {

        container.style.transition = '';

    }, 300);

});

这个是简单版，需要优化的地方还挺多，但基本能满足需求。

2026-01-30 22:09