scrollXでclientXとYが変わるのはなぜですか？

Question

マウスの動きに合わせて、マウスのx座標とy座標に沿った形を作成しました。ここで結果を確認することができます：http://codepen.io/anon/pen/qNKgqo

これは正常に動作し、形状はマウスカーソルの中央にあります。残念ながら私はそれにいくつかの問題があります。

demoにあるように、セクションが1つあり、それは画面の上部に配置されています。 HTMLマークアップの一番上に、コメントアウトセクションがあります。コメントマークアップを削除すると、新しいセクションが設定されます。アイテムの上にマウスを置くと、前と同じ結果になりますが、次のセクションにスクロールすると、3つの親指を持つセクションがマウスの中央に表示されず、オフセットされます。あなたが底の上を動かすときだけ、あなたはその形のちょっとした部分を見るでしょう。私は次のスクリプトを使用して、マウスカーソルの中心に円の中心を

：

var target = $(this); 
    var dot = target.find('.pointer'); 

    var height = dot.height(); 
    var width = dot.width(); 

    var offset = target.offset(); 
    var top = offset.top; 
    var left = offset.left; 

    var mX = (event.clientX - left) - width/2; 
    var mY = (event.clientY - top) - height/2; 

コードの上方には、マウスの動きにトリガされるのMouseMove機能、です。

私の疑問は私のコードでは間違っています。セクションが1つしかない場合、それはうまくいくはずですが、HTMLマークアップに別のセクションを追加した後は、うまくいきません。

私はあなたの回答をお待ちしております。そのためにいくつかの解決策があることを願っています！

Answer 1

pageXとpageY：ブラウザで完全にレンダリングされたコンテンツ領域の左上に相対

。この参照点は、左上のURLバーと戻るボタンの下にあります。このポイントはブラウザウィンドウのどこにでも置くことができ、ページに埋め込まれたスクロール可能なページが埋め込まれていて、ユーザーがスクロールバーを動かすと実際に場所を変更することができます。

だからではなく、clientX/YのpageXとpageY使用します。詳細については

var mX = (event.pageX - left) - width/2; 
    var mY = (event.pageY - top) - height/2; 

はclientX/Y and pageX/Yの違いを読んで？