• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

如何约束工具提示/弹出式DIV的大小,使其不触发页面上的滚动条

JavaScript 来源:Corey Trager 3次浏览

鼠标悬停在某个元素上并出现提示。该提示会溢出页面,触发一个滚动条,这会更改布局,使得触发提示的底层元素不再位于鼠标指针下方,因此提示消失。如何约束工具提示/弹出式DIV的大小,使其不触发页面上的滚动条

尖端消失了,所以滚动条消失了,现在鼠标又重新覆盖了元素。

清洗,冲洗,重复。

如果我能确保提示不是太大以触发滚动条,那可以解决我的问题。

编辑:在阅读评论后,有些事情要澄清: 该div包含可以改变的文本。如果可以,我想显示所有文字。 div的位置需要靠近鼠标尖端的元素。关键是,我需要知道是否截断文本。

我的确发现这个链接:
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
包含此一块拼图,找出浏览器窗口有多大:

function alertSize() { 
    var myWidth = 0, myHeight = 0; 
    if(typeof(window.innerWidth) == 'number') { 
    //Non-IE 
    myWidth = window.innerWidth; 
    myHeight = window.innerHeight; 
    } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { 
    //IE 6+ in 'standards compliant mode' 
    myWidth = document.documentElement.clientWidth; 
    myHeight = document.documentElement.clientHeight; 
    } else if(document.body && (document.body.clientWidth || document.body.clientHeight)) { 
    //IE 4 compatible 
    myWidth = document.body.clientWidth; 
    myHeight = document.body.clientHeight; 
    } 
    window.alert('Width = ' + myWidth); 
    window.alert('Height = ' + myHeight); 
} 

===========解决方案如下:

编辑:响应意见,它听起来就像你试图让工具提示出现,而不影响现有元素的位置(从而导致主窗口上的滚动条)。

如果是这种情况,您希望将您的工具提示的位置定义为绝对位置,因为这会将其从元素流中移除(因此当它出现时不会将剩余页面向下推)。

例如,你可以启动它隐藏:

#tooltip { 
    position: absolute; 
    height: 100px; 
    width: 200px; 
    border: 1px solid #444444; 
    background-color: #EEEEEE; 
    display: none; 
} 

然后,在你的鼠标悬停事件(或任何它被称为上),设置#tooltip的topleft CSS来在任何你想要的,并将显示切换到block。因为它绝对定位,它不会导致闪烁。


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)