javascript - 绝对位置元素向左或向右取决于它在哪里？

Question

如何分配绝对左 0px 或绝对右 0px，具体取决于绝对定位的 div 是否会超出其容器 div。

我想我的意思是一个简单的例子:右键单击你的浏览器，看到它在你点击的地方右边有那个菜单位置，不要一直到页面的右边，而不是去在页面外部，它保留在页面内部，因此仍然可见。

示例:(将鼠标悬停在框上) http://jsfiddle.net/ueSNQ/1/

Answer 1

听起来您需要使用脚本来处理“取决于绝对定位的 div 是否会超出其容器 div”位，IE 支持 css 表达式，但您可能需要跨浏览器解决方案。

说的应该是像这样的简单事情

function isOverflow(parent, child){
    var left = 0;
    var op = child;
    while(op && op != parent){
        left += op.offsetLeft;
        op = op.offsetParent;
    }

    return ((left + child.offsetWidth) > parent.offsetWidth);

}

function getHoverHandler(parent, child){
    return function(){
        if(isOverflow(parent, child)){
            child.style.marginLeft = 'auto';
            child.style.right = '0px';
            child.style.left = '';
        }
    }
}

function attach(o,e,f){
    if(o.addEventListener){
        o.addEventListener(e, f, false);
    }else if(o.attachEvent){
        o.attachEvent('on'+e,f);
    }
}

var yellowElement = document.getElementsByTagName('UL')[0];
var list= document.getElementsByTagName('LI');
for(var i = 0; i < list.length; i++){
    var element = list[i];
    var tip = element.getElementsByTagName('DIV')[0];
    attach(element, 'mouseover', getHoverHandler(yellowElement,tip));

}