11

ユーザーが水平方向および垂直方向にスクロールするときに発生する一般的なスクロール イベントとは対照的に、JavaScript でイベント ハンドラーを水平スクロールにバインドする方法はありますか? ユーザーが水平にスクロールしたときにのみイベントをトリガーしたい。

この質問に対する答えを探し回ったのですが、何も見つからなかったようです。

ありがとう！

PS 用語の使い方が間違っていたら申し訳ありません。私はjavascriptにかなり慣れていません。

アップデート

ご回答ありがとうございます。要約すると、これは JavaScript ではサポートされていないと皆さんが言っているようですが、私はこのような機能を (jQuery を使用して) (jsFiddle)で実現できると思います:

var oldScrollTop = $(window).scrollTop();

$(window).bind('scroll', function () {
    if (oldScrollTop == $(window).scrollTop())
        //scrolled horizontally
    else {
        //scrolled vertically
        oldScrollTop = $(window).scrollTop();
    }
});​

それは私が知る必要があったすべてです。再度、感謝します！

4

6 に答える 6

7

電話から応答しているため、現時点ではコードを提供できません。

必要なことは、スクロール イベントをサブスクライブすることです。垂直/水平の特定のものはありません。

次に、現在の表示領域に関するいくつかの測定値を取得する必要があります。window.clientHeight と window.clientWidth を測定する必要があります。

次に、window.top と window.left を取得します。これにより、ビューポートの位置がわかります。つまり、0 より大きい場合は、スクロール バーが使用されています。

ここから、必要なものを取得するのは非常に簡単な計算です。次の数時間で誰もコード例を提供していない場合は、そうしようと思います。

編集：もう少し情報。

スクロール イベントをキャプチャする必要があります。また、初期の window.top および window.left プロパティをどこかに保存する必要があります。スクロール イベントが発生するたびに、現在の上/左の値がストアの値と異なるかどうかを簡単に確認します。

この時点で、どちらかが異なる場合は、独自のカスタム イベントをトリガーして、垂直スクロールまたは水平スクロールを示すことができます。jQuery を使用している場合、これは非常に簡単です。ライブラリの支援なしで js を作成する場合も簡単ですが、もう少し複雑です。

js でイベント ディスパッチを検索します。

その後、カスタム イベントにサブスクライブする他のコードを記述できます。メソッド呼び出しでそれらを結び付ける必要はありません。

于 2012-07-30T21:33:23.197 に答える
4

scrollh関数をイベントにアタッチできる jQuery プラグインを作成しました。

jsfiddle.net で実際の動作を確認してください。

/* Enable "scrollh" event jQuery plugin */
(function ($) {
    $.fn.enableHScroll = function() {
        function handler(el) {
           var lastPos = el
              .on('scroll', function() {
                 var newPos = $(this).scrollLeft();
                 if (newPos !== lastPos) {
                     $(this).trigger('scrollh', newPos - lastPos);
                     lastPos = newPos;
                 }
              })
              .scrollLeft();
        }
        return this.each(function() {
            var el = $(this);
            if (!el.data('hScrollEnabled')) {
                el.data('hScrollEnabled', true);                 
                handler(el);
            }
        });
    }
}(jQuery));

使い方は簡単です:

$('#container')
    .enableHScroll()
    .on('scrollh', function(obj, offset) {
        $('#info').val(offset);
    });

スクロール イベントは非常に高速で発生することに注意してください。スクロールバーをクリックして新しい位置にジャンプしても、多くのスクロール イベントが発生します。このコードを調整して、hscroll イベントを発生させる前に、短時間待機し、その間の位置のすべての変更を蓄積することができます。

于 2012-07-30T22:51:10.540 に答える
3

同じscrollイベントを使用できますが、ハンドラー内でscrollLeft関数を使用して、イベントが最後に発生したときからスクロールバーが水平方向に移動したかどうかを確認します。スクロールバーが動かなかった場合は、ハンドラーから戻ります。それ以外の場合は、変数を新しい位置に更新して、アクションを実行してください。

于 2012-07-30T21:29:30.167 に答える
1

ページの値が変更されたかどうかを確認し、x値を無視できますy。

値が変化した場合x: 水平スクロールがあります。

于 2012-07-30T21:29:41.707 に答える
1

ページロードでは、両方のスクロールバーの初期位置を 2 つの変数に格納します (おそらく両方とも 0 になります)。次に、スクロール イベントが発生するたびに、プロパティscrollleftとscrolltopプロパティを見つけます。scrollleftプロパティの値が異なり、のscrolltop値が以前の値と同じである場合、それは水平スクロールです。次に、変数の値を新しいスクロール値に設定します。

于 2012-07-30T21:31:50.653 に答える
0

いいえ、スクロール水平 (グローバル スクロール用) の特別なイベントはありませんが、プロパティでコンテンツの位置を確認することができます.scrollLeft。以前の値と異なる場合は、ユーザーがコンテンツを水平にスクロールしたことを意味します。

于 2012-07-30T21:30:13.233 に答える