I am using React and below is the code I am using to implement the infinite scroll feature.
componentDidMount() {
// Flag to check if the content has loaded.
let flag = true;
function infiniteScroll() {
let enterpriseWrap = $('.enterprise-blocks');
let contentHeight = enterpriseWrap.offsetHeight;
let yOffset = window.pageYOffset;
let y = yOffset + window.innerHeight;
console.log('hey');
if(this.props.hasMore) {
if(y >= contentHeight && flag) {
flag = false;
this.props.loadMoreVendors(function() {
flag = true;
});
}
} else {
window.removeEventListener('scroll', infiniteScroll.bind(this));
}
}
window.addEventListener('scroll', infiniteScroll.bind(this));
}
I actually want to unbind the scroll event once all the items are loaded but removeEventListener
is not working. Am I doing something wrong?
Every time you bind a function, you get a new function back. You are removing a different listener from the one you added initially. Store the result of function.bind
and use that in both places
this.boundInfiniteScroll = this.infiniteScroll.bind(this);
...
} else {
window.removeEventListener('scroll', this.boundInfiniteScroll);
}
}
window.addEventListener('scroll', this.boundInfiniteScroll);
To removeEventListener
you have to pass the same reference to function as you pass to addEventListener
., .bind
returns the new reference because it is the new function
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
so in your example, you have two different references that's why removeEventListener
does not work
let flag = true;
const infiniteScrollFn = infiniteScroll.bind(this);
function infiniteScroll() {
let enterpriseWrap = $('.enterprise-blocks');
let contentHeight = enterpriseWrap.offsetHeight;
let yOffset = window.pageYOffset;
let y = yOffset + window.innerHeight;
if (this.props.hasMore) {
if (y >= contentHeight && flag) {
flag = false;
this.props.loadMoreVendors(function() {
flag = true;
});
}
} else {
window.removeEventListener('scroll', infiniteScrollFn);
}
}
window.addEventListener('scroll', infiniteScrollFn);
Example
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With