jQueryページのスクロール位置scrollTop、scrollLeftについて
1114 ワード
Webページは、ページを表示するブラウザウィンドウよりも大きくなることが多い.Webドキュメントには多くのコンテンツがあるため、ブラウザよりもページが高くなり、時には幅が広くなることが多い.これにより、図10−8に示すように、アクセス者はスクロールすることによってページ全体を表示させる.訪問者がページをスクロールすると、一部のドキュメントが視線から消えます.たとえば、Webページをブラウザウィンドウに完全に挿入することはできません.ドキュメントは左または上にスクロールされるため、ページの上部と左側が視界に消えます.これは、ブラウザウィンドウの左上隅とドキュメントの左上隅が異なることを意味します.画面上部のダイナミックBannerなどの新しい要素を配置しようとすると、要素のleftとtopの位置を0に設定しようとすると、実際にはドキュメントの上部に置いただけで、ブラウザウィンドウの外にあるというトラブルが発生します.
幸いなことに、jQueryは2つの関数を提供し、上部と左側からページのどの部分をスクロールするか(つまり、ドキュメントのどの画素がブラウザウィンドウの上部と左側に存在するか)を決定できます.ドキュメントのどの部分がブラウザウィンドウの上にあるかを決定するには、次の行のコードを使用します.
ドキュメントのどの部分が画面の左側にあるかを決定するには、次の行のコードを使用します.
この2つの関数は、ページ上の別の要素を特定するために使用できるピクセル値を返します.たとえば、ポップアップウィンドウをページの中心に配置し、誰かが下にスクロールした後でも、アクセス者がどのくらいスクロールしたかを確認し、ポップアップウィンドウを移動して、多くの追加要素がページの下にあるようにする必要があります.ポップアップツールのヒントの例では、訪問者がページを下にスクロールしてツールヒントを配置する場合は、意外にもツールヒントをページスペースに配置しやすいが、ブラウザのビューポートに領域の外が見えることに注意する必要があります.scrollTop()を使用して、ブラウザウィンドウの上部にある表示領域の上にツールチップを配置しないようにします.
以上が本文のすべてですが、お好きになってください.
幸いなことに、jQueryは2つの関数を提供し、上部と左側からページのどの部分をスクロールするか(つまり、ドキュメントのどの画素がブラウザウィンドウの上部と左側に存在するか)を決定できます.ドキュメントのどの部分がブラウザウィンドウの上にあるかを決定するには、次の行のコードを使用します.
$(document).scrollTop()
ドキュメントのどの部分が画面の左側にあるかを決定するには、次の行のコードを使用します.
$(document).scrollLeft()
この2つの関数は、ページ上の別の要素を特定するために使用できるピクセル値を返します.たとえば、ポップアップウィンドウをページの中心に配置し、誰かが下にスクロールした後でも、アクセス者がどのくらいスクロールしたかを確認し、ポップアップウィンドウを移動して、多くの追加要素がページの下にあるようにする必要があります.ポップアップツールのヒントの例では、訪問者がページを下にスクロールしてツールヒントを配置する場合は、意外にもツールヒントをページスペースに配置しやすいが、ブラウザのビューポートに領域の外が見えることに注意する必要があります.scrollTop()を使用して、ブラウザウィンドウの上部にある表示領域の上にツールチップを配置しないようにします.
以上が本文のすべてですが、お好きになってください.