web-dev-qa-db-ja.com

マウスホイールスクロールで水平スクロールを行う方法は？

ちょうど今、偶然偶然 http://www.benekdesign.com/ に遭遇しました。ここでは、マウスホイールスクロールで水平スクロールを実行します。 本当に言えば、私はこの機能が好きではありませんでした。それは少しイライラさせられました。それでも、 同じ方法を教えてください。

編集済み

わかりました、firebugは彼が使用していると言います

/ * Horizo​​ntal Tiny Scrolling-水平Webサイト用のスムーズスクロールスクリプト2（垂直「Tiny Scrolling」の兄弟）3by Marco Rosella- http://www.centralscrutinizer.it/en/design/js-php/horizo​​ntal-tiny-scrolling 4 v0.6-2007年2月14日

javascriptjqueryhtmlscrollhorizontal-scrolling
19
Rakesh Juyal

mousewheel event を領域のスクロールにマッピングしているようです。 IEでは、これはdoScroll()メソッドを使用するだけで本当に簡単です。これにより、垂直バーが通常スクロールする量だけ水平バーがスクロールされます。他のブラウザはdoScroll()メソッドをサポートしていないため、代わりに任意の量だけスクロールする必要があります。

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);
24
Andy E

上記の解決策は私には役に立たないので、ここで私が見つけた別の解決策： http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

例： http://digwp.com/archives/horz/

8
madc

別の形式：

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