javascript - 移动端滚动到一定位置，实现元素悬浮

Question

如题，移动端的滚动总是在滚动结束后才会触发悬浮，如何在touchmove的过程中实现？

Answer 1

Touch 事件分为：touchstart, touchmove, touchend 和 touchcancel（不常用）；
如果确定想要在 touchmove 事件被触发时，执行某个函数／做出某个动作，可以先登记一下 doucument.addEventListener('touchmove', doSomething)，而后在 doSomething 函数中判断 scrollTop 的数值变化即可。

另外，一般我会将前三个事件都连接到同一个监听函数，然后再在这个函数的前几行排除不需要的动作，留下真正想试用的事件。

希望能够有所帮助。

Answer 2

监听scrollTop，更改元素display：fixed

Answer 3

主要监听滚动条的位置，然后设置显示就可以了

Answer 4

这个地方其实主要是一个注意点，移动端监听滚动事件时改变元素display属性不会立即生效，会在滚动（滑动）结束后才生效，也就是表现为题主说的滚动结束后才触发悬浮，这个解决方案可以用切换 opacity 属性而不是 display 属性来解决，即：

• 需要悬浮窗出现之前将其透明度设置为0，且禁用其点击事件

• 滚动到合适位置时将其透明度设置为1，且开启点击事件