如果鼠标点击浏览器窗口底部附近，则显示div的右下角

Question

所以我使用以下内容显示相对于鼠标点击位置的div左上角。 如果点击位于浏览器底部附近，我该如何考虑？

现在发生的是div出现在屏幕外但让我向下滚动以查看div。它可以工作，但我宁愿让它足够聪明，无论我在哪里点击浏览器屏幕都显示整个div。

这是我到目前为止所学到的：

 div1.style.top =  (event.clientY + self.pageYOffset) + 'px';
 div1.style.left = (event.clientX + self.pageXOffset) + 'px';

Answer 1

看看Dan's answer on "How to tell if a DOM element is visible in the current viewport?"。他正在描述几种检查元素是否仍然对用户可见的方法。

对于您的情况，这意味着您可以检查要显示的div是否可见。或者万一它不会：将光标位于光标位置的顶部/左侧（并且相对于它）。