on mousewheel vanilla js scroll horizontally #js

script.js

document.addEventListener('wheel', function(e)
{
  if(e.type != 'wheel')
  {
    return;
  }
  let delta = ((e.deltaY || -e.wheelDelta || e.detail) >> 10) || 1;
  delta = delta * (-300);
  document.documentElement.scrollLeft -= delta;    
  // safari needs also this
  document.body.scrollLeft -= delta;    
  e.preventDefault();
});

Yes, just check the vertical scroll position and don't execute the function above if you passed the end.

Pseudo code:

document.addEventListener('wheel', function(e)
{
  if(e.type != 'wheel')
  {
    return;
  }
  if( scrollPositionIsAtTheEnd ) {
    return;
  }
  let delta = ((e.deltaY || -e.wheelDelta || e.detail) >> 10) || 1;
  delta = delta * (-300);
  document.documentElement.scrollLeft -= delta;    
  // safari needs also this
  document.body.scrollLeft -= delta;    
  e.preventDefault();
});

You then have to also check when you again scroll up, but I leave the implementation to you. :)

@themevan did you manage to implement that code?
I’m wanting the same functionality but not fully understanding the pseudo code posted.

@woodydaniel the idea is to entirely skip that function and not to call e.preventDefault when you have reached the end.