3

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.

Shanker Paudel
  • 740
  • 1
  • 9
  • 21
  • You can use for example [this my code](http://stackoverflow.com/a/18791958/1169519). – Teemu Sep 22 '13 at 19:03
  • Thanks for asking that question. I've been meaning to get around to writing a horizontal scroll function, but totally forgot about it until I saw this post. – Shylo Hana Sep 23 '13 at 01:11

2 Answers2

3
<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>
Shylo Hana
  • 1,792
  • 13
  • 10
0

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

  1. On element hover
  2. Attach a scroll event handler
  3. 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.
  4. Apply some CSS such as margin-left on the element with the amount of scroll the user did vertically.
  5. (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.
Dzhuneyt
  • 8,437
  • 14
  • 64
  • 118