Horizontal scrolling with mouse wheel in a div

user_1464110 0
Viewed 65438

How to scroll horizontal in na div with mouse wheel, or drag with jquery?

I've tried draggable, but in my code it isn't useful.

Now I've got a horizontal scrollbar. Is there a posibility to scroll the content in my div using the mouse wheel?

scroll html
9 Answers

You can do that with just javascrpt (no Jquery) in a clear way and also allow vertical scrolling:

const target = document.querySelector('div')

target.addEventListener('wheel', event => {
  const toLeft  = event.deltaY < 0 && target.scrollLeft > 0
  const toRight = event.deltaY > 0 && target.scrollLeft < target.scrollWidth - target.clientWidth

  if (toLeft || toRight) {
    event.preventDefault()
    target.scrollLeft += event.deltaY
  }
})
user_135878690

Pure CSS solution

You dont need Javascript or JQuery for this
For more information: https://css-tricks.com/pure-css-horizontal-scrolling/

::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}

::-webkit-scrollbar-button {
  width: 1px;
  height: 1px;
}

body {
  background: #111;
}

div {
  box-sizing: border-box;
}

.horizontal-scroll-wrapper {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: calc(250px + 1px);
  max-height: 750px;
  margin: 0;
  padding-top: 1px;
  background: #abc;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-transform: rotate(-90deg) translateY(-250px);
          transform: rotate(-90deg) translateY(-250px);
  -webkit-transform-origin: right top;
          transform-origin: right top;
}
.horizontal-scroll-wrapper > div {
  display: block;
  padding: 5px;
  background: #cab;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transform-origin: right top;
          transform-origin: right top;
}

.squares {
  padding: 250px 0 0 0;
}
.squares > div {
  width: 250px;
  height: 250px;
  margin: 10px 0;
}
<div class="horizontal-scroll-wrapper squares">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
  <div>item 7</div>
  <div>item 8</div>
</div>

user_66367620

In my case I needed to reset the scroll back to normal when the browser was resized, so I modified Izhar's code a bit to make it work for my application:

Initiate hScroll on browser resize:

$(function () {
     $(window).resize($('.horizontal-scroll').hScroll(60));
});

Check if container has white-space property set to 'nowrap' and return if not: 

$.fn.hScroll = function (amount) {
    var $this = $(this);
    amount = amount || 120;
    $this.bind('DOMMouseScroll mousewheel', function (event) {
         var isHorizontal = $('.horizontal-scroll').css('white-space') == 'nowrap';
         if (!isHorizontal) return;
         var oEvent = event.originalEvent,
        direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta,
        position = $this.scrollLeft();
    position += direction > 0 ? -amount : amount;
    $this.scrollLeft(position);
    event.preventDefault();
});

};

I use this media query to update the white-space property:

@media (min-width: 768px) {
    .horizontal-scroll { white-space: nowrap !important; }
}

Hope this helps anyone wanting to do the same.

user_21930190

This code allows you to start scrolling the page when the horizontal scrolling of the block is over.

function addHorizontalScroll(blockId) {
    let block = document.getElementById(blockId);

    block.addEventListener("wheel", function (evt) {
        let maxScroll = block.scrollWidth - block.offsetWidth;
        let currentScroll = block.scrollLeft + evt.deltaY;

        if (currentScroll > 0 && currentScroll < maxScroll) {
            evt.preventDefault();
            block.scrollLeft = currentScroll;
        }
        else if (currentScroll <= 0) {
            block.scrollLeft = 0;
        }
        else {
            block.scrollLeft = maxScroll;
        }
    });
}


addHorizontalScroll('widebla');

function addHorizontalScroll(blockId) {
    let block = document.getElementById(blockId);

    block.addEventListener("wheel", function (evt) {
        let maxScroll = block.scrollWidth - block.offsetWidth;
        let currentScroll = block.scrollLeft + evt.deltaY;

        if (currentScroll > 0 && currentScroll < maxScroll) {
            evt.preventDefault();
            block.scrollLeft = currentScroll;
        }
        else if (currentScroll <= 0) {
            block.scrollLeft = 0;
        }
        else {
            block.scrollLeft = maxScroll;
        }
    });
}
#widebla {
   height: 100px;
   overflow-y: auto;
}
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div id='widebla'> blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla </div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>
<div>bla</div>

user_183588680 
why is mine failing?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">

        * {
          margin:0;
          padding:0;
        }
        
        
        
        #page-wrap {
          width:500%; /* 100% x length of panel */
          height:100%;
          overflow:hidden;
        }
        
        .panel {
          width:20%; /* 100% / length of panel */
          float:left;
          height:100%;
        }
        
        .panel .inner {padding:2em}
        
        
        /* Details (Ignore this!) */
        body {
          font:italic normal 13px/1.4 Georgia,Serif;
          color:#666;
        }
        
        h2 {
          font-weight:bold;
          font-size:200%;
          margin:0 0 1em;
        }
        
        p {margin:1.5em 0}
        
        #panel-1 {
          background-color:black;
          color:white;
        }
        
        #panel-2 {
          background-color:magenta;
          color:yellow;
        }
        
        #panel-3 {
          background-color:darkblue;
          color:lightgreen;
        }
        
        #panel-4 {
          background-color:pink;
          color:brown;
        }
        
        #panel-5 {
          background-color:darkred;
          color:cyan;
        }
        
        </style>
</head>
<body >
    <div  >
        <section style="height:500px;width:100%;color: rgb(29, 121, 202);">
            <h2>WWF History</h2>
            <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
          </section>
          
          <section style="height:500px;width:100%;color: rgb(223, 12, 135);">
            <h2>WWF's Symbol</h2>
            <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
          </section>
          <section id="vane">
                <div id="page-wrap">
            <div class="panel" id="panel-1">
                <div class="inner"><h2>Eodem Modo Typi</h2><div style="-webkit-column-count:4;-moz-column-count:4;column-count:4;-webkit-column-gap:1em;-moz-column-gap:1em;column-gap:1em;text-align:right;"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p><p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p><p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p></div><p style="font-size:500%;font-style:normal;text-align:right;">&rArr;</p></div>
            </div>
            <div class="panel" id="panel-2">
                <div class="inner"><h2>Facilisis At Vero Eros</h2><div style="-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:2em;-moz-column-gap:2em;column-gap:2em;"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p><p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p><p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p></div></div>
            </div>
            <div class="panel" id="panel-3">
                <div class="inner"><img src="http://lorempixel.com/400/400/food/" alt="Image" width="400" height="400" style="float:right;margin:0 0 0 3em;"><h2>Euismod Tincidunt</h2><div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></div></div>
            </div>
            <div class="panel" id="panel-4">
                <div class="inner"><h2>Claritas est Etiam Processus Dynamicus</h2><img src="http://lorempixel.com/200/200/food/" alt="Image" width="200" height="200" style="float:right;margin:0 0 0 3em;"><div style="-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:2em;-moz-column-gap:2em;column-gap:2em;"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p><p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p><p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p></div></div>
            </div>
            <div class="panel" id="panel-5">
                <div class="inner"><img src="http://lorempixel.com/400/400/food/" alt="Image" width="400" height="400" style="float:left;margin:0 3em 0 0;"><h2>Vulputate Velit Esse Molestie</h2><div style="-webkit-column-count:4;-moz-column-count:4;column-count:4;-webkit-column-gap:1em;-moz-column-gap:1em;column-gap:1em;"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p><p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p><p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p></div></div>
            </div>
        </div>
          </section>
        
          <section  style="height:500px;width:200%; color: rgb(29, 121, 202);  ">
          <div  >
            <h2>WWF History</h2>
            <p >The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
          </div>  
          </section>

          
          <section style="height:500px;width:100%;color: rgb(223, 12, 135);">
            <h2>WWF's Symbol</h2>
            <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
          </section>
    </div>
    
</body>
<script>
     (function() {
    function scrollHorizontally(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        console.log(delta)
      var resultado =  document.getElementById('vane').scrollLeft -= (delta * 40 ); // Multiplied by 40
        e.preventDefault();
        console.log()
    }
    if (document.getElementById('vane').addEventListener) {
        // IE9, Chrome, Safari, Opera
        document.getElementById('vane').addEventListener('mousewheel', scrollHorizontally, false);
        // Firefox
        document.getElementById('vane').addEventListener('DOMMouseScroll', scrollHorizontally, false);
    } else {
        // IE 6/7/8
        document.getElementById('vane').attachEvent('onmousewheel', scrollHorizontally);
    }
})();
</script>
</html>
user_137776070
Related