检测Div是否超出屏幕

Question

我用JavaScript（带有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');
        })
    });

- mTuran

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

- mTuran

Answer 2

尝试这个：

替换：

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

希望能有所帮助

- Hasan

Answer 3

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

一个简单的例子，当菜单右对齐且最右边的下拉菜单突出屏幕时，可以使用JavaScript添加一个类，将菜单从左侧对齐到菜单项的右侧：

.dropdown ul {
    left: 0;
}

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

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

- Yi Jiang

---

我也自作主张地纠正了你最初呈现的代码中的一些问题。 - Yi Jiang

Answer 4

我认为您可能需要将下拉菜单的高度以像素为单位存储在变量中，并检查其y偏移量。这篇文章可能能够指引您正确的方向 如何判断元素是否超出屏幕。但很遗憾，我无法为您提供可工作的代码。

- The Muffin Man