I found a very good solution from stack overflow about how to detect scroll direction and do something but this is working on an another div. I have a div with ID article-container that has scrollbar. I want to detect the scroll direction on this div not on the body or bigger parent div.

There is an onscroll event which has a function and I am trying to do everything inside it but is it causing any problem ...?

HTML

<div id="article-container" onscroll="scrollmainup()"> ... text ... </div>

JAVASCRIPT

function scrollmainup(){
var art = document.getElementById("article-container");
document.getElementById("article-container").scrollIntoView({
    block: 'center',
    behavior: 'smooth'
});
this.prev = window.scrollY;
art.addEventListener('scroll', e => this.handleNavigation(e));
handleNavigation = (e) => 
{
const window = e.currentTarget;
if (this.prev > window.scrollY) 
{
    console.log("scrolling up");
} 
else if (this.prev < window.scrollY) 
{
    console.log("scrolling down");
}
this.prev = window.scrollY;
};}

I've set art.addEventListener instead of window.addEventListener ... the variable art is not working ... something wrong with const window = e.currentTarget; not sure ... How can I make this code work on the article-container scrollable div ... the code works well on the whole page but not when I scroll the div ... please help me to set the eventlistener correctly ... Thanks in advance ...