ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptとCSSの復習(3)_javascriptスキル

JavaScriptとCSSの復習(3)_javascriptスキル

WBOY
WBOYオリジナル
2016-05-16 18:24:21881ブラウズ

まず、ページ全体に対する相対的なカーソルの位置を取得する方法を見てみましょう。カーソル位置変数 x および y は、通常、マウス イベント (mousemove や Mousedown など) を通じて取得されます。現在のカーソルを取得するには、次の 2 つの一般的な関数が使用されます。ページ全体に対する相対的な位置。

コードをコピー コードは次のとおりです:
//カーソルの水平位置を取得します
function getX(e) {
//一般化されたイベント オブジェクト
e = e window.event
//最初に非 IE ブラウザの場所を確認し、次に IE の場所を確認します return e.pageX || e.clientX document.body.scrollLeft;
}

//カーソルの垂直位置を取得します
function getY(e) {
// event object
e = e window.event;
//まず IE 以外のブラウザの場所を確認し、次に IE
return e.clientY ドキュメントの場所を確認します。 body.scrollTop;
}

たとえば、FF では e.pageX はページ全体の X 座標 (スクロール バーのスクロール距離を含む) ですが、IE では e.clientXは、現在ユーザーの目の前に表示されているビューの X 座標を表します。完全な X 座標位置を取得するには、document.body.scrollLeft (水平スクロール バーの距離) を追加する必要があります。
次の概念はビューポートであり、ブラウザのスクロール バー内のすべてとみなすことができます。ビューポートに含まれるコンポーネントには、ビューポート ウィンドウ、ページ、スクロール バーなどもあります。
ページのサイズを取得します:

コードをコピーします コードは次のとおりです:
/ /ページの高さを返します (コンテンツを追加すると変更される可能性があります)
function pageHeight() {
return document.body.scrollHeight;
}
//ページの幅を返します
function pageWidth() {
return document.body.scrollWidht;


scrollHeight とscrollWidth (クリックして表示)、要素の潜在的な幅と高さを記述します。現在表示されているサイズだけでなく、詳細も確認できます。
次に、スクロール バーの位置、つまりビューポートを基準としたページの上部からの距離を取得する必要があります。


コードをコピー コードは次のとおりです。// の水平スクロール位置を決定する関数です。 browser
functionscrollX () {
//IE6/7 の厳密モードで使用されるショートカット
var de = document.documentElement;
//pageXOffset 属性がブラウザに存在する場合は、次を使用します。 it
return self.pageXOffset ||
//それ以外の場合は、ルート ノードの左スクロール オフセットを取得してみます
(de && de.scrollLeft) || 最後に、取得してみますbody 要素の左スクロール オフセット Amount
document.body.scrollLeft
}

//ブラウザの垂直スクロール位置を決定する関数
functionscrollY() { //厳密モードの IE6 /7 で使用されるショートカット
var de = document.documentElement;
//ブラウザに pageYOffset 属性が存在する場合は、それを使用します
return self.pageYOffset ||
//それ以外の場合は、ノードの上部スクロール オフセットを取得しようとします
(de && de.scrollTop) ||
//最後に、ボディ要素の上部スクロール オフセットを取得しようとします
document.body.scrollTop;
}


window オブジェクトのプロパティとして存在する、scrollTo メソッドを使用して移動する方法を見てみましょう。 2 つのパラメータ、つまり x オフセットと y オフセットを受け取ります。2 つの例



コードをコピーします//スクロールする必要がある場合指定された要素に対して、次のようにすることができます。
window.scrollTo(0, pageY(document .getElementById('content')));


pageY 関数に慣れていない場合は、それを確認して、それを使用してドキュメント全体の要素の位置を取得できます。もう一度指定して、自分で統合します



コードをコピーします
コードは次のとおりです: //要素の Y 位置を取得しますfunction pageY(elem) { //ルート要素にあるかどうかを確認します
return elem.offsetParent?
//前の要素を取得し続けることができる場合は、現在のオフセットを増やして上方向に再帰を続けます
elem.offsetTop pageY(elem.offsetParent):
// それ以外の場合は get現在のオフセット
elem.offsetTop;
}


次に、ビューポートのサイズを取得することで、コンテンツの量を把握できます。ユーザーは現在見ることができます。



コードをコピー
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。