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.
... [READ MORE]