CODEWITHSUNDEEP
javascriptjqueryhtmlwebscroll
Ethranes
Ethranes

Reputation: 349

Substitute vertical for horizontal scrolling

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.

Upvotes: 2

Views: 1099

Answers (2)

jritchey
jritchey

Reputation: 136

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.

Upvotes: 1

Hybrid
Hybrid

Reputation: 7049

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/

Upvotes: 1

Related Questions