web-dev-qa-db-ja.com

水平リストでのマウスホイールによる水平スクロール

マウスホイールで水平スクロールを試みていますが、動作しないようです。

これが私の フィドル です

私のメインクラス.selectorはスクロール可能なものですoverflow

これは私がスクロールを初期化しようとしているJSです

 $('.selector').mousewheel(function(e, delta) {
    this.scrollLeft -= (delta * 40);
    e.preventDefault();
});

これは私が水平スクロールに使用している例です https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

助けてくれてありがとう！

編集：おかげで、私はFiddleええ申し訳ありませんでしたjQueryを忘れてしまいましたが、ローカルホストでテストしていたとき、 jQuery 1.11.1を使用しているので、多分そうでした。

javascriptjqueryhtmlcssscroll
8
Sanction

あなたはあなたのhtmlにJQueryを追加することを忘れました

http://jsfiddle.net/902tjbzz/

jquery.js： http://code.jquery.com/jquery-2.1.4.min.js

7
Aelios

試してみてください this ：

$('.selector').mousewheel(function(e, delta) {
    $(this).scrollLeft(this.scrollLeft + (-delta * 40));
    e.preventDefault();
});

また、フィドルにjQueryを含めませんでした。

[〜＃〜]編集[〜＃〜]

実際、唯一の問題は、jQueryを含めなかったことです。最初のコードは正常に機能します。

6
Arg0n

まず最初に、あなたはjsfiddleにjqueryを含めるのを忘れています。

2番目のこと：$('.selector').mousewheel(function(e, delta) {を$('.selector').on("mousewheel", function(e, delta) {に変更し、それから初めて、イベントがトリガーされることがわかりました。

scrollLeftプロパティの更新ロジックも確認してください。方向（左、右）を忘れないでください。そのため、場合によっては、それを差し引く代わりに値を追加する必要があります。

1
Andrew