jQueryページのスクロール位置scrollTopとscrollLeft_jqueryについての簡単な説明

Web ページは、ページを表示するブラウザ ウィンドウよりも大きいことがよくあります。Web ドキュメントには多くのコンテンツが含まれているため、ページの高さがブラウザよりも大きくなり、場合によっては幅が広くなり、訪問者は全体をスクロールする必要があります。ページ(図10-8を参照)。訪問者がスクロールすると、文書の一部が見えなくなります。たとえば、Web ページがブラウザ ウィンドウに完全に収まらず、ドキュメントが左または上にスクロールするため、ページの上部と左側が表示されなくなります。これは、ブラウザ ウィンドウの左上隅とドキュメントの左上隅が同じではないことを意味します。新しい要素 (たとえば、画面の上部に動的バナー) を配置しようとする場合、要素の左と上の位置を 0 に設定しようとすると、問題が発生します。実際には配置しているだけです。ドキュメントの上部にありますが、ブラウザ ウィンドウの外側にあります。

幸いなことに、jQuery には、ページのどれだけが上と左からスクロールされたか (つまり、ブラウザ ウィンドウの上と左にドキュメントの何ピクセルが存在するか) を判断できる 2 つの関数が提供されています。ドキュメントのどのくらいがブラウザ ウィンドウの上にあるかを確認するには、次のコード行を使用します:

コードをコピーします コードは次のとおりです:

$(ドキュメント).scrollTop()

画面の左側にドキュメントがどのくらいあるかを確認するには、次のコード行を使用します:

コードをコピーします コードは次のとおりです:

$(ドキュメント).scrollLeft()

どちらの関数も、ページ上に別の要素を配置するために使用できるピクセル値を返します。たとえば、誰かが下にスクロールした後でもポップアップをページの中央に配置したい場合は、訪問者がどこまでスクロールしたかを判断し、追加要素の多くがページの下部に来るようにポップアップを移動する必要があります。ポップアップするツールチップの例では、訪問者がページを下にスクロールしたときにツールチップを見つけるときに注意する必要があります。誤ってツールチップをページ領域内に、ブラウザの表示領域外に配置してしまう可能性があります。口の部分。ブラウザ ウィンドウの上部にある表示領域の上にツールチップが配置されないようにするには、scrollTop() を使用します。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。