检测是Div Out Of Screen

Question

我通过javascript(w/jQuery)和CSS编写了下拉菜单.下拉菜单工作正常,但如果下拉菜单位于角落,例如用户屏幕的最右边或最左边,那么如果用户打开下拉菜单,它会溢出到窗口的看不见的区域并导致水平滚动条.

我怎么能停止溢出？

HTML

<ul class="dropdown">
    <li class="headlink">
        <a href="javascript://">Menu</a> <img src="/static/images/mini/sort_down.png" />

        <ul class="arrowlist invisible">
            <li>Hello 1</li>
            <li>Hello 2</li>
            <li>Hello 3</li>
        </ul>
    </li>
</ul>

CSS

.dropdown {z-index: 1}
.dropdown .headlink{border:1px solid #C7C9CF;padding:4px 6px;}
.dropdown li{}
.dropdown a{outline:none}
.dropdown ul{z-index:100;border:1px solid #C7C9CF;-moz-border-radius: 4px; -webkit-border-radius: 4px;border-radius:4px;behavior: url(/static/css3pie.php);background: #FFF url("/static/images/grey_fade_back.png") repeat-x scroll bottom;padding:8px;position:absolute;top:-1px;left:-4px}
.dropdown ul li{margin:2px;white-space:nowrap}

JS

$('.dropdown li.headlink')
    .click(function() {
        $(this).css('position', 'relative');
        $('ul', this).slideDown(100);
    });

        $('.dropdown li.headlink')
    .mouseleave(function(){
        var headlink = this;
        $('ul', this).slideUp(100, function(){
            $(headlink).css('position', 'static');
        })
    });

Answer 1

我找到了一个解决方案：

$('.dropdown li.headlink')
    .click(function() {
        $(this).css('position', 'relative');

        if($('ul', this).width() + 10 > $(window).width() - $(this).offset().left) $('ul', this).css('left', 'auto').css('right', '-1px');
        else $('ul', this).css('left', '-4px').css('right', 'auto');

        $('ul', this).slideDown(80);
    });