檢測是div出屏

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的HEIG存儲ht在你的下拉列表中，並檢查它的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/