爲什麼客戶端X和Y在滾動中更改？

我在鼠標移動時創建了一個跟隨鼠標x和y座標的形狀。你可以在這裏檢查結果：http://codepen.io/anon/pen/qNKgqo 爲什麼客戶端X和Y在滾動中更改？

這將正常工作，並且形狀位於鼠標光標的中心。不幸的是我有一些問題。

正如你可以在demo中看到的，我有一個部分，它位於屏幕的頂部。在HTML標記的最頂端，您會注意到註釋部分。如果您刪除了註釋標記，則會設置新的部分。當您將鼠標懸停在項目上時，結果與之前相同，但當您滾動到下一部分時 - 即使用三個拇指，您將注意到該形狀不是鼠標的中心，而是偏移。只有當你懸停在底部時，你纔會看到一小塊形狀。

爲圓心，以我使用下面的腳本鼠標光標的中心：

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;

上面的代碼是從鼠標移動功能，將鼠標移動被觸發。

我的問題是我做錯了我的代碼中缺少。當只有一個部分工作時，它會起作用，但是在向HTML標記添加另一部分之後，它會被搞亂。

我期待您的回覆。希望有一些解決方案！

來源

2016-07-28 Caspert

pageX屬性和pageY：

相對於在瀏覽器中完全呈現內容區域的左上角。該參考點位於左上角的url欄和後退按鈕下方。這一點可能在瀏覽器窗口中的任何地方，並且如果頁面中嵌入了可嵌入的可滾動頁面並且用戶移動了滾動條，它實際上可以改變位置。

所以使用pageX屬性和pageY，而不是clientX/Y：

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

爲clientX/Y and pageX/Y之間更詳細閱讀區別？

來源

2016-07-28 11:15:29

爲什麼客戶端X和Y在滾動中更改？

回答

相關問題