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

Answer 2

我认为您可能需要在var中存储下拉列表的px高度并检查其y偏移量。这篇文章可能会指出你正确的方向How to see if an element in offscreen我希望我能为你提供工作代码。

Answer 3

试试这个

取代：

.dropdown .headlink{border:1px solid #C7C9CF;padding:4px 6px}

与

.dropdown .headlink{border:1px solid #C7C9CF;padding:4px 6px;position:relative}

并替换

.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;
  position:absolute;
  top:-1px;
  left:-4px;
  padding:8px;
}

带

.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;
  position:absolute;
  left:-4px;
  padding:8px;
}

希望有所帮助

Answer 4

这样的问题的一般解决方案是，使用CSS或JavaScript，将类添加到第一个或最后一个下拉菜单元素，以便更正它的对齐方式。在这种特定情况下，使用绝对定位，应该更改left和right属性。

一个简单的例子，当菜单右对齐并且最右边的下拉列表突出显示时，是添加一个带有JavaScript的类，它将菜单从已对齐的菜单项左侧移开在右边：

.dropdown ul {
    left: 0;
}

.dropdown ul.last {
    right: 0;
    left: auto;
}

可以在此处找到一个简单的演示：http://www.jsfiddle.net/yijiang/HyXuy/1/

检测是Div Out Of Screen

4 个答案: