Scroll Horizontally Without Scrollbar Using jQuery

To scroll horizontally with CSS is very annoying, because the whole page will move vertically and sometimes the Y axis will scroll. So I decided to use jQuery and it’s very simple. Only 237 characters which is only 2 lines. Here is the **jQuery **code with the div id #scrollho.

jQuery

$('#scrollho').on('mousewheel',function(e){
 e.preventDefault();
 scrollLeft=$('#scrollho').scrollLeft();
 if(e.originalEvent.wheelDeltaY.toString().slice(0,1)=='-'){
  $('#scrollho').scrollLeft(scrollLeft+100);
 }else{
  $('#scrollho').scrollLeft(scrollLeft-100);
 }
});

CSS

#scrollho{
 overflow:hidden;
}

Explanation

The #scrollho div’s scrollbars are hidden with CSS. When a mousewheel event occurs on #scrollho the default event is neutralized and the div is scrolled horizontally to the direction of the mousewheel using e.originalEvent.wheelDeltaY. **e.originalEvent.wheelDeltaY **is converted into string as to do the slice function to check whether the number is negative or not.