引

需求要做个功能，页面上的一个小图标从固定变成可移动。一把梭哈后，在PC上显示没有问题，移动的可欢快了，但是到了手机里以后出现了“联动问题”。


所以，当元素移动的时候，页面也会出现上下的滚动，这样的体验是超级差的。

解决方案

document.addEventListener('touchstart', function(e){console.log('开始移动');const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;document.body.style.cssText += `position: fixed;top:-${scrollTop}px`;......})

在 touchstart 阶段，拿到 body 的滚动，然后把 body 作为固定定位，定位在滚动处，这样相当于把背景固定。

document.addEventListener('touchend', function(e){const body = document.body;body.style.position = '';const top = body.style.top;document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);body.style.top = '';......})

在 touchend 阶段，再把 body 的固定取消，这样就可以实现联动问题。