How to make div scroll horizontal on mouse scroll up and down

Question

Title explains most of it. How can i scroll a div horizontally with mouse scroll button my div do not have a vertical scroll and i want user to utilize mouse scroll.

Answer 1

<html>
  <head>
    <title>Horizontal Scroll Test</title>
    <script type='text/javascript'>
      window.onload = function(e) {
        evt =                   e || window.event;

        var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';

        if(document.attachEvent) {
          document.getElementById('scrollableDiv').attachEvent('on'+mousewheelevt, scroll);
        } else {
          document.getElementById('scrollableDiv').addEventListener(mousewheelevt, scroll, false);
        }
      }


      function scroll(evt) {
        scrollTarget =      evt.currentTarget || evt.srcElement;

        if(scrollTarget.scrollWidth > scrollTarget.offsetWidth) {
          var delta = Math.max(-1, Math.min(1, (evt.wheelDelta || -evt.detail)));
          switch(delta) {
            case 1:
              scrollTarget.scrollLeft -= 32;
              break;

            case -1:
              scrollTarget.scrollLeft += 32;
              break;
          }
        }
      }

    </script>
  </head>


  <body>


    <div id='scrollableDiv' style='width: 256px; height: 256px; position: absolute; overflow: hidden;'>
      <div style='width: 400px;'>
sflgjskfngk lgj s;jg;sfj l;sjg l;fjgo; urgt8904sflgjskfngk lgj s;jg;sfj l;sjg l;fjgo; urgt8904 56 2jgs[09t l45jtw89pt 2n5t,.mh b89p7u 24nm<br>
5t. umb8u or5rtywetr5y  56 sflgjskfngk sflgjskfngk lgj s;jg;sfj l;sjg l;fsflgjskfngk lgj s;jg;sfj l;sjg l;fjgo; urgt8904 56 2jgs[09t l45jt<br>
w89pt 2n5t,.mh b89p7u 24nm5t. umb8u or5rtywetr5y jgo; urgt8904 56 2jgs[09sflgjskfngk lgj s;jg;sfj l;sjg l;fjgo; urgt8904 56 2jgs[09t l45jt<br>
w89pt 2n5t,.mh b89p7u 24nm5t. umb8u or5rtywetr5y t l45jtw89pt 2n5t,sflgjskfngk lgj s;jg;sfj l;sjg l;fjgo; urgt8904 56 2jgs[09t l45jtw89pt <br>
2n5t,.mh b89p7u 24nm5t. umb8u or5rtywetr5y .mh b89p7u 24nm5t. umb8u or5rtywetr5y lgj s;jg;sfj l;sjgsflgjskfngk lgj s;jg;sfj l;sjg l;fjgo; <br>
urgt8904 56 2jgs[09t l45jtw89pt 2n5t,.mh b89p7u 24nm5t. umb8u or5rtywetr5y  l;fjgo; urgt8904 56 2jgs[09t l45jtw89pt 2n5t,.mh b89p7u 24nm5t.<br>
 umb8u or5rtywetr5y 2jgs[09t l45jtw89pt 2n5t,.mh b89p7u 24nm5t. umb8u or5rtywesflgjskfngk lgj s;jg;sfj l;sjg l;fjgo; urgt8904 56 2jgs[09t l<br>
45jtw89pt 2n5t,.mh b89p7u 24nm5t. umb8u or5rtywetr5y tr5y
      </div>
    </div>


  </body>
</html>

Answer 2

This is usually done with JavaScript and although I can't provide the exact code to back it up, the logic is pretty simple:

On element hover
Attach a scroll event handler
When a scroll event occurs, get exactly how much was scrolled (in px) and either prevent the event or scroll back up to the original position.
Apply some CSS such as margin-left on the element with the amount of scroll the user did vertically.
(Optional) Check if the element's right edge is reached and if it is, don't scroll any further so it doesn't "escape" out the page from the left side.

How to make div scroll horizontal on mouse scroll up and down

Question

2 answers

solution1
3 ACCPTED 2013-09-22 21:48:04

solution2
0 2013-09-22 19:04:40

How to make div scroll horizontal on mouse scroll up and down

Question

2 answers

solution1 3 ACCPTED 2013-09-22 21:48:04

solution2 0 2013-09-22 19:04:40

solution1
3 ACCPTED 2013-09-22 21:48:04

solution2
0 2013-09-22 19:04:40