How to do a horizontal scroll on mouse wheel scroll?

Question

Just now, accidentally, i stumble upon http://www.benekdesign.com/ . Here on mouse wheel scroll it performs horizontal scroll. Truly speaking i didn't like this feature. It was a bit irritating. But still, Please tell me how to achieve the same.

Edited

Okay, firebug says he is using

/* Horizontal Tiny Scrolling - a smooth scrolling script for horizontal websites 2(the brother of the vertical "Tiny Scrolling") 3by Marco Rosella - http://www.centralscrutinizer.it/en/design/js-php/horizontal-tiny-scrolling 4 v0.6 - February 14, 2007

Smoke

It doesn't work in Opera 10.10. – Greensand

Answer 1

It looks like he's just mapping the mousewheel event to scrolling the area. In IE, this is really easy by just using the doScroll() method - this will scroll the horizontal bar by the amount the vertical bar would normally scroll by. Other browsers don't support the doScroll() method, so you have to live with scrolling by an arbitrary amount instead:

var mouseWheelEvt = function (event) {
    if (document.body.doScroll)
        document.body.doScroll(event.wheelDelta>0?"left":"right");
    else if ((event.wheelDelta || event.detail) > 0)
        document.body.scrollLeft -= 10;
    else
        document.body.scrollLeft += 10;

    return false;
}
document.body.addEventListener("mousewheel", mouseWheelEvt);

Eliseoelish

Re your EDIT, this is why you should use a library. – Brisling

@Cobby: good luck finding a library that implements cross-browser onmousewheel. There's a couple of jQuery plugins, but they're pretty big compared to the code here. :-) – Eliseoelish

jquery.mousewheel is actually pretty decent, and it's hardly "big". Your solution doesn't take into account the delta value. With a trackpad; the mousewheel event gets fired about 10 to 20 times for the slightest movement, which means scrolling 100px instead of the 10px the user was expecting. – Brisling

@Cobby: jquery.mousewheel doesn't do what my sample code does, so you're making an apples and oranges comparison. I just think it's excessive for this task. Also, I think you're confused about how delta works, which indicates the distance the mouse/trackpad was scrolled per event fired. So, if anything, this code would scroll a little slower for very large movements. Having taken this from some of my older code for a custom scrollbar, I can verify that it works fairly well, though I suppose I could improve it a little. You really should do your research before hastily down voting answers. – Eliseoelish

Sorry, I DID try your method incrementing a fixed amount but my <div> was trying to scroll about 2000px with just the slightest two-finger swipe on my trackpad... you need to use the delta to make something scroll nicely. I know exactly how delta works. – Brisling

@Cobby: apology accepted. FWIW, I don't think the problem is avoidable and it can't be related to delta. A large delta would mean that the script should scroll farther but, as you pointed out, my script isn't set up to do that. If the script is scrolling too fast, it's because too many scroll events are firing and not because it's not taking delta into account. I admit, it's not a perfect solution, but it does what was asked and that's why I don't think the down vote was warranted. The script can be easily tweaked by anyone adopting it, so you're just being pedantic. – Eliseoelish

Umm, the problem is avoidable... that's what delta is for. I've been reviewing code for several JavaScript-powered scrollbars and they all use delta in their mousewheel events (and most of them use jquery.mousehweel.js). And after refactoring delta into my project I have a nicely scrolling <div> - users wouldn't even know it's not native browser scroll. For now, your answer is promoting bad UX for any would-be "copy & pasters", if you update your answer with delta I'll glad upvote. – Brisling

@Cobby: I plan to update my answer when I get to a touch pad to test it. What's unavoidable is scrolling by an arbitrary amount in any browser other than IE, you're severely misguided if you think that delta can solve that problem. The problem you're describing cannot be related to delta, I'm not sure why you're failing to grasp that. Like I said, it's a small issue in a larger solution and you're being the very definition of pedantic. I don't really care about the down vote, but more the principle - by down voting you're saying the answer isn't useful and I disagree with that. – Eliseoelish

If it helps to clarify what I'm trying to get across, although on a trackpad a minimal movement can generate some 30 to 50 mousewheel events, the delta (well the one normalized by jquery.mousewheel) is often between ~0.025 and 0.3... since I use an velocity factor of 10, the number of pixels scroll each event is usually only 1px or 2px. But if you swipe hard, there will be a similar number of events but, although the delta will start at 0.025 it will climax anywhere up to 20 or higher (and then potentially slow back down depending on how the swipe occurred). Or did you already know this? – Brisling

I get the feeling we've got our wires crossed a bit, text is soo bad for this sort of communication. :( Regarding my first comment, I was originally implying that if you used a library in the first place you wouldn't have had an issue like "Oh, Firefox 3.x doesn't do mousewheel". I'm sorry if I ever came across negative, I'm simply believe in perfection within reason and that a question with several thousand views should have an accurate and up-to-date answer. – Brisling

@Cobby: I just didn't really think your down vote was in the spirit of SO, take a look at the tool tips. No hard feelings. With regards to the delta, event.wheelDelta values are multiples of 120/-120. event.detail works differently. I took a look at jquery.mousewheel and it appears to normalize the delta by dividing wheelDelta by 120 or detail by 3. Each multiple represents an entire click of a mouse wheel, apparently, and I'm unsure how this translates per track pad scroll event. I'll look into it shortly. – Eliseoelish

SO doesn't let me remove my downvote. I actually modified jquery.mousewheel to use MozMousePixelScroll and divide event.detail by roughly 42 which seems to give a slightly better scroll experience for trackpads, so take a look at the when you look into mousewheel again. – Brisling

Reading these comments in 2020 makes me feel I'm working on a different field from these guys. – Loris

Answer 2

As the solutions above does not work for me, here another one i just found: http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

Example: http://digwp.com/archives/horz/

Secondbest

Thanks a lot for taking the time to post this comment @madc. Really helped. EDIT: the link to the plugin is down for me, and the demo on css-tricks doesn't work in Firefox 19.0.1 for me either but the example link your provided does so i just ripped the code off from there. – Parton

a lot better indeed! – Premonition

Answer 3

Another form:

document.addEventListener('wheel', (e) => {
    document.getElementById('scroll_container').scrollLeft += e.deltaY;
})

Epaminondas