求助啊，我需要浏览器中监听onscroll事件，我用的mac,上下滚动网页的话一直触发不了scroll事件，如果再触摸板上用俩手指对网页进行缩放就触发scroll事件了，进入handleScroll了。我是这么写的，谁知道为什么啊
componentDidMount: function () {
window.addEventListener('scroll', this.handleScroll);
},
componentWillUnmount: function () {
window.removeEventListener('scroll', this.handleScroll);
},
handleScroll: function (e) {
console.log('浏览器滚动事件')
},
可是为什么我用原生的js写法,就没有问题。didMount 之后我应该是可以操作实际dom的。
这是原生的写法
window.addEventListener('scroll', function () {
var obj = document.getElementById('test');
console.log(obj.offsetTop - document.body.scrollTop);
if (obj.offsetTop - document.body.scrollTop <= 0) {
obj.style.position = 'fixed';
obj.style.top = '-20px';
}
})
后来我没用window取的body的.在componentDidMount里面这么写的
$('body').scroll(this.handleScroll);
仍然监听不到scroll事件。。。。
componentDidMount() {
window.addEventListener('scroll', this.handleScroll.bind(this));
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll.bind(this));
}
handleScroll(e) {
console.log('浏览器滚动事件');
}
我的做法是除了你写的添加‘scroll’事件外，在handleScroll事件里还需要利用ref获取dom节点，监听这个节点，可以实现。 不能监听body哦。还有这样做，在移动端屏幕滚动时是无法触发的，得停止滚动才会触发监听。 还请高人完美解决react滚动事件。
进入其他页面,在返回时,会出现:
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.
不知道这么久了，lz解决没？
我试了下你的代码，一切正常啊，正常触发scroll。不过可以考虑下，你的div之类的有没有设置overflow scroll之类的。可能body的高度就是视口的高度，body不发生滚动的。body里面的div滚动了而已，scroll没冒泡。
componentDidMount() {
let _this = this;
window.addEventListener('scroll', () => {
_this.handleScroll();
});
}
这样写