Scroll using Scroll-Bar Only

Question

I am using three.js to allow users to create and edit a 3D model that involves using the scroll-wheel/two finger function, to zoom in and out. I want a second section of the page that is off the screen by default but the user can scroll down to see it. Preferably, this will be done only using the scroll bar, while the scroll-wheel can still be used.

For performance reasons, I'd prefer not to have to use something such as vue.js. Users provide data that remains on their computer that I'm using in both sections. This prevents me from just placing the data on another screen.

Overflow:hidden is out of the question because then I can not scroll to the bottom portion.

I tried using PreventDefault with several different EventListeners but none of them worked properly.

Below is the function that determines the size of the window and should include a function or the code to prevent scrolling.There aren't particular elements that shouldn't scroll, all of them shouldn't.

function onWindowResize() {
  var viewWidth;
  var viewHeight;
  viewHeight=window.innerHeight-315;
  //For Mobile
  if(!UIactive && innerWidth < 640){
    viewWidth= window.innerWidth;
  //For Computer & Tablet
  } else {
    viewWidth= window.innerWidth -317;
    if(window.innerHeight < 700){
      viewHeight=window.innerHeight-52.67;
      //Disable Scrollwheel

      window.addEventListener('wheel',function(event){
        //mouseController.wheel(event);
        event.preventDefault();
      }, false);

    }
  }
    camera.aspect = (viewWidth) / (viewHeight);
    camera.updateProjectionMatrix();
    renderer.setSize(viewWidth, viewHeight);
    UI.style.height= (viewHeight+'px');

}

Edit: I tried using the answer to a similar question. This did not achieve the desired result. I changed the code to be both window... and document... and a console.log statement included works but I can still scroll.

this.canvas.addEventListener('wheel',function(event){
    mouseController.wheel(event);
    return false; 
}, false);

I then proceeded to try using preventDefault again and recieved the following error

Unable to preventDefault inside passive event listener due to target being treated as passive

Answer 1

Google Chrome docs say that,

With this intervention wheel/touchpad scrolling won't be blocked on document level wheel event listeners that do not need to call preventDefault() on wheel events.

Thus, you should apply the onmousewheel event on a specific div like so:

<div id="ScrollableDiv" style="height : 900px;background-color : red">

</div>

function stop(){
    return false;
}

var div = document.getElementById('ScrollableDiv');
div.onmousewheel= stop;

Please refer this working fiddle .