javascript - div的 "creating"滚动条

Question

我有一堆不同的图像，当您将鼠标悬停在图像上时，我会显示一个自定义工具提示，该提示将自身设置在光标下方。

现在，工具提示工作正常，但如果我将窗口变大，将图像悬停在边缘，然后再次将窗口变小，那么工具提示 div 在主体外部，它会创建一个滚动条(水平)。

或者如果窗口足够小以至于工具提示超出它，它还会创建一个滚动条(认为这可以通过一些 javascript 检查来修复)

基本上我是在问是否有任何方法可以使 div “不创建滚动条”或在调整窗口大小时调用函数？

JSFiddle showing what's happening

HTML

<div style='position:relative;'>
    <div class='img' onmousemove="showTooltip('tip', event);" onmouseout="hideTooltip('tip');"></div>
    <div id='tip' class='tooltip'></div>
</div>

CSS

.img {
    width:500px;
    height:500px;
    background-color:#F00;
}
.tooltip {
    width:200px;
    height:200px;
    background-color:#888;
    position:absolute;
}

JS

function showTooltip(name, event) {
    var div = document.getElementById(name);
    div.style.visibility = "visible";
    div.style.top = (event.clientY + 20 + document.body.scrollTop) + "px";
    div.style.left = (event.clientX + 20 + document.body.scrollLeft) + "px";
}

function hideTooltip(name) {
    document.getElementById(name).style.visibility = "hidden";
}

Answer 1

你可以使用

overflow: hidden;

在您的 CSS 中防止滚动。在这种情况下，由于您没有任何东西包裹您的区域，因此您必须将它应用到 body 上。

body {
    overflow: hidden;
}