I am not a javascript object oriented pro and am stuck for a while now. I am trying to implement a call back api so that i can detect when an element is being scrolled. Unfortunately, am unable to fire the prototype method from another method. Please help
//HTML
//<div style="width:500px;height:500px;"id="myElement"></div>
//JS
mousewheelListen=function(){
this.el.addEventListener('wheel',);//How do i call Scroller.prototype.scrolling() ?
}
Scroller=function(el){//Constructor
this.el=el;
mousewheelListen.call(this);
}
Scroller.prototype.scrolling=function(callback){//
callback.call(this);
}
var el=document.getElementById('myElement');
var myScroller=new Scroller(el);
myScroller.scrolling(function(){//Listening when scrolling
console.log('scrolling');
});
>Solution :
This seems to do the trick.
Moved all DOM element dependent code into a function that runs after all DOM Content has been loaded.
Added the wheel event listener on the referenced element
var myScroller;
function Scroller(el) { //Constructor
this.el=el;
this.el.addEventListener('wheel', this.scrolling, { passive: true })
}
Scroller.prototype.scrolling = function(event){ //
console.log(event);
}
window.addEventListener("DOMContentLoaded", function() {
let el = document.getElementById('myElement');
myScroller=new Scroller(el);
})
0
<div style="width:100px;height:100px;border:1px solid black" id="myElement"></div>