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

Question

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

现在发生的事情是 div 出现在屏幕外，但让我向下滚动更多以查看 div。它可以工作，但无论我在浏览器屏幕的哪个位置单击，我都希望它足够聪明以显示整个 div。

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

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

Answer 1

Have a look at Dan's answer on "How to tell if a DOM element is visible in the current viewport?". He's describing several methods to check if an element is still visible to the user.

For your case this means you could check wether the div to be shown would be visible. Or in case it wouldn't: swop it top/left of the cursor position (and vis-à-vis).