Horizontal scrolling with mouse wheel in a div
Asked Answered
O

9

41

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?

Orthopedics answered 28/7, 2012 at 12:13 Comment(0)
B
84

Try this for horizontal scrolling with mouse wheel. This is pure JavaScript:

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

Here’s a demo, but with document.body and window as a targetted element: https://taufik-nurrohman.github.io/dte-project/full-page-horizontal-scrolling.html

Blur answered 11/3, 2013 at 16:43 Comment(10)
Thanks this is exactly what I was looking for. Finally an answer that doesn't suggest a JQuery plugin. BTW: If anyone else is experiencing any trouble with this try adding it after all your html. Example - jsbin.com/usabigE/2/editIlluviation
If you want to scroll vertically after the element has been scrolled all the way to the left or right, you can wrap the e.preventDefault(); with this if statement: if((delta > 0 && document.getElementById('yourDiv').scrollLeft > 0) || (delta < 0 && document.getElementById('yourDiv').offsetWidth+document.getElementById('yourDiv').scrollLeft < el.scrollWidth)) (tested on Chrome and Firefox)Quantity
How to implement this to div?Metaphrase
@Arthur <div id="yourDiv"></div>Blur
What changes shoud be made to have it scrolled the other direction? For writing-mode: vertical-rl websites for instance.Acclamation
@TaufikNurrohman Can we have an example of this between vertical scroll section?Hamachi
@Hamachi Should works fine by putting that <div id="yourDiv"></div> somewhere in your scrolling-vertically section.Blur
@TaufikNurrohman Thanks and one more question can we have same scenario on vertical scrollHamachi
@Jo small correction of his reply if((delta > 0 && document.getElementById('yourDiv').scrollLeft > 0) || (delta < 0 && document.getElementById('yourDiv').offsetWidth+document.getElementById('yourDiv').scrollLeft < document.getElementById('yourDiv').scrollWidth))Teston
Update: Consider to use the standardized whell event today!Blur
H
21

I have rewritten the code from the answer by @Anonymous-Lettuce. The width recalculation of the element is skipped as it was unnecessary and sometimes undesirable. This also provides additional feature to pass scroll-amount in px to the plugin.

Use it like this:

$(document).ready(function(){
    $('#your_div').hScroll(100); // You can pass (optionally) scrolling amount
});

Here goes the upgraded plugin jquery.hscroll.js:

jQuery(function ($) {
    $.fn.hScroll = function (amount) {
        amount = amount || 120;
        $(this).bind("DOMMouseScroll mousewheel", function (event) {
            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();
        })
    };
});

Here is the minified version of the same jquery.hscroll.min.js:

jQuery(function(e){e.fn.hScroll=function(l){l=l||120,e(this).bind("DOMMouseScroll mousewheel",function(t){var i=t.originalEvent,n=i.detail?i.detail*-l:i.wheelDelta,o=e(this).scrollLeft();o+=n>0?-l:l,e(this).scrollLeft(o),t.preventDefault()})}});

Here is the JSFiddle

Helladic answered 21/7, 2015 at 7:5 Comment(0)
H
7

Wrote this plugin days ago.

 $.fn.hScroll = function( options )
 {
   function scroll( obj, e )
   {
     var evt = e.originalEvent;
     var direction = evt.detail ? evt.detail * (-120) : evt.wheelDelta;

     if( direction > 0)
     {
        direction =  $(obj).scrollLeft() - 120;
     }
     else
     {
        direction = $(obj).scrollLeft() + 120;
     }

     $(obj).scrollLeft( direction );

     e.preventDefault();
   }

   $(this).width( $(this).find('div').width() );

   $(this).bind('DOMMouseScroll mousewheel', function( e )
   {
    scroll( this, e );
   });
}

Try it out with

$(document).ready(function(){
     $('#yourDiv').hScroll();
});

The width of the child element of the div should be wider than the parent.

Like 4000 px or something.

 <div id="yourDiv">
       <div style="width: 4000px;"></div>
 </div>
Hatching answered 26/2, 2013 at 11:22 Comment(3)
works well, tested on jquery datatable with horizontal scrolling enabled (didn't need the width recalculation though). You might want to create a github repo for this.Airing
I might, I'll give it a try later. Never used Github yet.Hatching
working well but the point is i cant scroll above or below this myDiv section :(Hamachi
W
5

I'd like to add a slight improvement to the answer given by @Taufik.

In the context of an es2015 module:

const el = document.querySelector('#scroller');

function scrollHorizontally(e) {
  e = window.event || e;
  e.preventDefault();
  el.scrollLeft -= (e.wheelDelta || -e.detail);
}

function init() {
  if (!el) {
    return;
  }

  if (el.addEventListener) {
    el.addEventListener('mousewheel', scrollHorizontally, false);
    el.addEventListener('DOMMouseScroll', scrollHorizontally, false);
  } else {
    el.attachEvent('onmousewheel', scrollHorizontally);
  }
}

export default init;

The main difference being: el.scrollLeft -= (e.wheelDelta || -e.detail);

Using the e.wheelData directly in the scroll offset means we can have the inertia, so that the scrolling can slow down gradually. I found this worked well for me.

Just use in your code like so (assuming the above code is in a file called scroller.js):

import scroller from './scroller.js';
scroller();
Wynnie answered 31/8, 2017 at 16:32 Comment(1)
Thank you for this!!Arduous
C
4

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
  }
})
Cardholder answered 21/5, 2020 at 8:24 Comment(4)
This is super simple I think. You can even add a bit of "smooth" behavior, by simply using scrollBy instead of explicitly setting the scroll position, like: target.scrollBy({ left: event.deltaY*0.5, behavior: 'smooth' });Dependency
That would be great if it really make scrolling smooth. Try it on my Pen: codepen.io/FelixLuciano/pen/LYGjzGaCardholder
Works well, but moves in the wrong direction: moving the mouse wheel down moves to the right. How to change it so moving the mouse up moves to the right?Calliper
Then you can change line 9 to -=.Cardholder
T
3

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>
Teenybopper answered 26/10, 2020 at 15:20 Comment(0)
C
0

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.

Column answered 9/1, 2019 at 5:7 Comment(0)
D
0

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>
Dizzy answered 17/6, 2022 at 23:20 Comment(0)
R
-1
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>

 
Rheotaxis answered 11/2, 2022 at 16:11 Comment(2)
As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.Colossal
If you have a new question, please ask it by clicking the Ask Question button. Include a link to this question if it helps provide context. - From ReviewWrecker

© 2022 - 2024 — McMap. All rights reserved.