如何获得scrollbale窗口视口的相对尺寸

I am having a Tooltip (larger image view) that is being positioned via e.pageX e.pageY and i am trying to make sure it is not hidden below the current scrolled view port.

我正在通过e.pageX e.pageY定位工具提示(更大的图像视图),我正在尝试确保它没有隐藏在当前滚动视图端口下方。

I have seen many sites have this my code is something like this but i am missing something.

我见过很多网站都有这个我的代码是这样的,但我错过了一些东西。

var positionImg = function(e) {
    var viewportWidth = $(window).width(); 
    var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();  
    var mouseAtY = e.pageY;
    var mouseAtX = e.pageX;
    var maxBottomVPos = viewportHeight-"i dont know";
    var maxTopVPos = 30;

    if (mouseAtY >= maxBottomVPos)
    {
        tPosX = mouseAtX+ 10;
        tPosY = mouseAtY -520;
    }
    else if (mouseAtY <= maxTopVPos)
    {
        tPosX = mouseAtX;
        tPosY = mouseAtY +40;
    }
    else
    {
        tPosX = mouseAtX;
        tPosY = mouseAtY +20;  
    }
    $zoomContainer.css({top: tPosY, left: tPosX});
};

2 个解决方案

#1

var maxBottomVPos = viewportHeight-"i dont know";

var maxBottomVPos = viewportHeight-“我不知道”;

You probably don't want to go any lower than the height of the element that you are positioning. So use the height of zoomContainer to figure out how much higher it needs to go. This way, the whole thing can be included. Of course, you'll have to consider that the user might shrink the screen too small to fit the container.

您可能不希望任何低于您定位的元素的高度。因此,使用zoomContainer的高度来确定它需要多高。这样,整个事情都可以包括在内。当然,您必须考虑用户可能会缩小屏幕太小以适应容器。

To get the scroll offset use scrollTop. With this you will have both the size of the viewport and how far down the viewport is.

要获取滚动偏移量,请使用scrollTop。通过此操作,您将同时具有视口的大小和视口的下方。

#2

I found the answer:

我找到了答案:

Quite simple: var positionImg = function(e) { cntnrH = $zoomContainer.height() + 230; calHight = e.pageY - $(window).scrollTop() + cntnrH; docH = $(window).height()

很简单:var positionImg = function(e){cntnrH = $ zoomContainer.height()+ 230; calHight = e.pageY - $(window).scrollTop()+ cntnrH; docH = $(窗口).height()

        var mouseAtY = e.pageY;
        var mouseAtX = e.pageX;

      if (calHight >= docH)
         {
        tPosX = mouseAtX + 5;
        tPosY = mouseAtY - cntnrH;
         }
 else if (calHight <= calHight){
           tPosX = mouseAtX;
       tPosY = mouseAtY + 15;
      }
      else
      {
       tPosX = mouseAtX;
       tPosY = mouseAtY +20;  
      }
      $zoomContainer.css({top: tPosY, left: tPosX});
      };
     doIt = $("img.hovelble");
     doIt.hover(showZoomImg, hideZoomImg).mousemove(positionImg);
});

#1