Div的“创建”滚动条

我有一堆不同的图像，当您悬停图像时，我会显示一个自定义工具提示，它将自己设置在光标下方。Div的“创建”滚动条

现在，工具提示工作正常，但如果我使窗口变大，将图像悬停在边上，然后再次使窗口变小，因此tooltip div位于主体外部，它会创建一个滚动条（水平）。

或者，如果窗口足够小，以便得到提示之外呢，还创建了一个滚动条（认为这是可以解决的一些JavaScript检查）

Basicly我问，如果有做的任何方式一个div“不创建滚动条”或调用窗口大小调整功能？

HTML

CSS

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

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"; 
}

来源

2014-01-26 user1768788

我通过修改hideTooltip函数解决了这个问题;

function hideTooltip(name) { 
    var div = document.getElementById(name); 
    div.style.visibility = "hidden"; 
    div.style.top = "0px"; 
    div.style.left = "0px"; 
}

这将确保没有工具提示将在窗口之外。

来源

2014-01-26 21:36:04 user1768788

1+不错的解决方案 - 很高兴你知道了！ :) –

overflow:hidden;

在你的CSS应该做的事情。你可能会考虑在显示图像的另一侧的提示，如果你的提示将移动的观点

来源

2014-01-26 21:15:20 Martin149

出可以使用

overflow: hidden;

在你的CSS，以防止滚动。在这种情况下，由于您没有包装您的区域的任何东西，您必须将其应用于身体。

body { 
    overflow: hidden; 
}

来源

2014-01-26 21:16:05

Div的“创建”滚动条

回答

相关问题