losing context of 'this' in javascript class

Question

export class PageScroll {


    constructor (args)
    {

         this.$scrollableElements = [];
         this.$scrollClassName = args;
         
         this.Init();
    }
    
    
    
    Init ()
    {      // Correctly calls detectScrollableElements
       document.addEventListener('wheel', this.detectScrollableElements, 'true');
     
       // correctly prints variable
       console.log('page = ' + this.scrollClassName);   
    }
    
    
    
    


   
   
   detectScrollableElements()
   {
       console.log("name1 = " + this.$scrollClassName);  // this context lost, $scrollClassName 'undefined'!!!
       
       let $scrollEle = document.getElementsByClassName(this.$scrollClassName);
       
           for(let items in $scrollEle)
           {
               this.$scrollableElements[$scrollEle[items].id] = document.getElementById($scrollEle[items].id).getBoundingClientRect();
            
                console.log(`${items} is at ${$scrollEle[items]} \n`);
           }
       console.log("name = " + this.$scrollClassName);
   }







}


window.onload = () => {
   const $page = new PageScroll('page_scroll');
}

It's seems I'm losing the context of 'this' when I call a method from within a method. I have tried using bind(), call(), as well as an arrow function. Why does 'this' not stay bound to the Class?

Thanks for any help on this confusion.