0

HTML markup:

<div class="big">
  long width text
</div>

CSS rule:

.big{
    height:200px;
    background: red;
}

How to scroll horizontal Only BIG div on mouse wheel http://jsfiddle.net/cxD55/

user3826752
  • 43
  • 2
  • 10
  • 2
    [How to do a horizontal scroll on mouse wheel scroll?](http://stackoverflow.com/questions/2346958/how-to-do-a-horizontal-scroll-on-mouse-wheel-scroll?rq=1) – Deb Jul 27 '14 at 20:08
  • but this is the whole page, i want to scroll only red div because if i add elements in my page they will scroll too, but i need to scroll onle one div – user3826752 Jul 27 '14 at 20:17
  • Are you looking for something like [This](http://jsfiddle.net/4xc67/) – Deb Jul 27 '14 at 20:48

2 Answers2

2

Set the overflow-x CSS style but leave the overflow-y style set to visible.

Douglas
  • 36,802
  • 9
  • 76
  • 89
  • Ah, Deb's link suggests I've misunderstood the question, is that right? – Douglas Jul 27 '14 at 20:12
  • No, i want to scroll red div on mouse wheel – user3826752 Jul 27 '14 at 20:14
  • Ah, then remove the scroll bars from the page by setting `overflow: hidden` on the `html` and `body` elements, then capture [mouse wheel](https://developer.mozilla.org/en-US/docs/Web/Events/wheel) events on the page and set the [scrollLeft](https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollLeft) property of the div. That might work. – Douglas Jul 27 '14 at 20:21
0

Here is the solution:

Html

<div class="big">
long text here
</div>

CSS

.big {
height: 200px;
overflow: hidden;
width:6000px;
}

JS

(function () {
function scrollHorizontally(e) {
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    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);
}
})();

Change width according to your need.

Deb
  • 5,163
  • 7
  • 30
  • 45
  • It will be good if you share the demo because I tried your code and It's not working.It should be scroll using the mouse wheel. right? – Naren Verma Nov 30 '17 at 04:58