Substitute vertical for horizontal scrolling

Question

I'm trying to put a method in my website where if a user uses the scroll on their mouse, instead of it scrolling up and down it changes the input to scrolling left and right. I've added something called mousewheel.js to my project and I reference jquery in the header, and I'm running some code that I found on a thread on this site, but I can't get it to work, could anyone please point out what's wrong with my code.

HTML:

  <head>
    <title> Calendar </title>
    <link href="css/style.css" rel="stylesheet" type="text/css" media="screen">
    <link rel="stylesheet" href="css/colorbox.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>

  </head>

<body>

<script>$(document).bind('mousewheel', function(event, delta) {
if($(this).scrollLeft()>=0 && $(this).scrollLeft()<=$('body').width())
var k =  $(this).scrollLeft()-delta*50;
$(this).scrollLeft(k)
});</script>

Thanks for all help and advise.

score 1 · Answer 1 · answered Feb 24 '16 at 22:06

It seems that you code is a little different than the mousewheel example I see that works, try this:

$(function() {

   $("body").mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 30);

      event.preventDefault();

   });

});

Source: https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

score 1 · Accepted Answer · edited May 23 '17 at 12:31

If I understand your question correctly and you're open to simple Javascript (no plugins), look to this answer I found to a similar (same?) question.

(function() {
  function scrollHorizontally(e) {
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    document.documentElement.scrollLeft -= (delta*40); // Multiplied by 40
    document.body.scrollLeft -= (delta*40); // Multiplied by 40
    e.preventDefault();
  }
  if (window.addEventListener) {
    // IE9, Chrome, Safari, Opera
    window.addEventListener("mousewheel", scrollHorizontally, false);
    // Firefox
    window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
  } else {
    // IE 6/7/8
    window.attachEvent("onmousewheel", scrollHorizontally);
  }
})();

I've tested it in jsfiddle using Internet Explorer 11.

Substitute vertical for horizontal scrolling

2 Answers2