web-dev-qa-db-ja.com

divのスクロール

Div要素に onscroll イベントハンドラーがありませんか？私のページの動作は、div onscrollイベントハンドラーが認識されていることを示していないようです。

<div id='bd' onscroll='alert("Scroll Called");'></div>

また、
DOMイベントのバブリングに従って、divスクロールイベントはウィンドウスクロールイベントにロールアップしますか？

htmljavascript-eventsscroll
16
The Machine

使用しているHTMLのバージョンに応じて、代わりにonwheelイベントを使用できます。

onscrollイベントは、次の条件がすべて当てはまる場合にのみ機能します。

  1. Divにはoverflow: auto、overflow: scroll、overflow-y: scrollなど.
  2. Divには現在、スクロール可能なスクロールバーが表示されています。
  3. マウスの動きにより、実際にはスクロールバーがスクロールします。

したがって、onscrollイベントは、一般的なマウスホイールの動きの検出にはあまり適していません。

onwheelイベントはHTML 5の新機能であることに注意してください w3schoolsによると ですが、かなり広くサポートされています。

17
Sildoreth

DOCTYPEディレクティブについてさらに学び始めるまで、私もこれに頭を悩ませました。 onscroll属性は、最新バージョンのHTML仕様ではサポートされていません。 Visual Studioでは無効な構文として表示されます。多くのブラウザで機能する可能性がありますが、それでも無効なコードです。

代わりに、JavaScriptまたはjQueryを使用してイベントを実行できます。私はこのようなアプローチを使用して、2つの別個のdivでのスクロールを同期させます。

$("#gridTableContainer").scroll(function() {
    HandlingScrollingStuff();
});
4
Ripside

はい、ただし要素にはスクロールバーが必要です。どちらかでそれを与えることができますoverflow: auto（コンテンツが十分に高いときにスクロールバーを表示します）またはoverflow: scroll。 （これらは、xおよびyに対しても特別に設定できますoverflow-y: scroll...）

Divが一番下までスクロールされた後はバブルしませんが、ウィンドウがスクロールし始めます。 （基本的に、divがスクロールできる場合はスクロールイベントをインターセプトしますが、できない場合はページに移動します）

2
Caleb

私はそれがあなたが探しているものと正確に同じではないかもしれないことを知っていますが、多くのJavaScriptフレームワークがこれを助けることができます。 divには、スクロールイベントにフックするためのスクロールバーが必要ありません。

例えば。 Mootoolsにはmousewheelイベントがあります。 デモはこちら 。 （それはスクロールバーを持っていますが、Firebugを使用してスクロールバーを削除して試すことができます-それでも動作します）。

私は site でこれを自分で使用しました==しばらく前に作成しました。画像の上にマウスを置いたままスクロールすると、デフォルトのページがスクロールされず、代わりに画像バーがスライドします。

1
mqchen

JQUERY scroll（）が役立ちます。

$("#gridTableContainer").scroll(function() {
    HandlingScrollingStuff();
});
0
MackMon