移动端如何监听屏幕滚动

Question

现在的需求是当屏幕滚动到一定高度的时候，让某些元素固定在屏幕顶部，所以需要对屏幕滚动事件进行监听。

pc端可以用window.onscroll，但是这个在移动端完全没作用。我用touchmove试了一下，当手指触摸屏幕的时候确实可以，但是当手指离开屏幕，屏幕靠惯性滚动的时候就触发不了事件了。

请问各位，有没有好的思路或者办法，或者以前处理这种问题的经验？
非常感谢。

Answer 1

window.addEventListener('scroll', function () {
    console.log("移动端可以实现")
})

Answer 2

先说声抱歉，我没有看清楚题目，这里重新更新了，题主的问题是 当屏幕滚动到一定高度的时候，让某些元素固定在屏幕顶部，所以需要对屏幕滚动事件进行监听
我给的解决方案，还是用touch事件来处理，这样你应该懂了

$('body').bind('touchmove', function(e) { 
    e.preventdefault();               //禁用默认滚动行为，需要自己实现滚动
    console.log($(this).scrollTop()); // 计算你的屏幕高度
});

这样的话就不存在惯性滚动，但是需要自己实现滚动比较麻烦，另外要注意下touchmove的触发滚动频率，建议使用函数节流

移动端还真没有onscroll事件，除非是自己实现
不过你要实现元素固定顶部，不一定要监听onscroll事件吧，fixed去了解下，或者干脆看看bootstrap是怎么实现的

Answer 3

做一个看不见的底部紧贴的框，然后监测这个框的高度是否一直变化？如果一直变化那应该就是滚动了。
不知道这样可不可以。

Answer 4

监听scrolltop之类的可以实现

Answer 5

touchend时做判断

Answer 6

使用setInterval来监听scrollTop的变化。从这种方法已经实现过好几个现在已经在线上的项目了。。

Answer 7

可以监听，怎么计算屏幕距离顶端滚动了多少距离呢？求大神

Answer 8

请问最后实现了吗？！怎么实现的？我现在也处于这个问题中...touchmove会阻止浏览器的默认滚动事件，页面是没办法滚动。。