Jquery 方向感知悬停在溢出滚动上中断

我已经设置了方向感知悬停效果。在我把它放在一个带有溢出卷轴的容器中之前，它工作得很好。当它第一次加载时，您根本没有滚动，它工作得很好，但是一旦您开始滚动父容器，滚动总是表现为您从顶部滚动，我不知道为什么

我有一把小提琴的这个问题设置，这是非常混乱，我希望能得到任何帮助，我可以在这方面：

这是定向感知的特定js：

$(".container").bind("mouseenter mouseleave",function(e){

/** the width and height of the current div **/
var w = $(this).width();
var h = $(this).height();

/** calculate the x and y to get an angle to the center of the div from that x and y. **/
/** gets the x value relative to the center of the DIV and "normalize" it **/
var x = (e.pageX - this.offsetLeft - (w/2)) * ( w > h ? (h/w) : 1 );
var y = (e.pageY - this.offsetTop  - (h/2)) * ( h > w ? (w/h) : 1 );

/** the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);**/
/** first calculate the angle of the point, 
 add 180 deg to get rid of the negative values
 divide by 90 to get the quadrant
 add 3 and do a modulo by 4  to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 ) + 3 )  % 4;


/** do your animations here **/ 
switch(direction) {
 case 0:
  /** animations from the TOP **/
        currentSides = "thumb_cube show-top";
 break;
 case 1:
  /** animations from the RIGHT **/
        currentSides = "thumb_cube show-right";
 break;
 case 2:
  /** animations from the BOTTOM **/
        currentSides = "thumb_cube show-bottom";
 break;
 case 3:
  /** animations from the LEFT **/
        currentSides = "thumb_cube show-left";
 break;
}});

---

这里的问题是方向意识脚本

var x = (e.pageX - this.offsetLeft - (w/2)) * ( w > h ? (h/w) : 1 );
var y = (e.pageY - this.offsetTop  - (h/2)) * ( h > w ? (w/h) : 1 );

由于使用了html偏移量，测量结果是错误的，它需要的是文档的偏移量，而不是浏览器窗口的偏移量

这里的解决方案是使用jquery偏移量，因此代码更改为：

var x = (e.pageX - $(this).offset().left - (w/2)) * ( w > h ? (h/w) : 1 );
var y = (e.pageY - $(this).offset().top  - (h/2)) * ( h > w ? (w/h) : 1 );

---

这将从浏览器窗口中获取偏移量测量值。

小提琴不完整：它在CSS中遗漏了许多非webkit属性，因此它实际上只能在Chrome中查看。你应该提到这一点。你也可以通过点击复选标记来接受你自己的答案吗？这样，这个问题就不会出现在未解决问题的列表中。