Phát hiện là Div Out Of Screen

Question

Trình đơn thả xuống được mã hóa của tôi qua javascript (w/jQuery) và CSS. Trình đơn thả xuống hoạt động tốt nhưng nếu trình đơn thả xuống nằm ở góc ví dụ ngoài cùng bên phải hoặc bên trái của màn hình người dùng thì người dùng sẽ mở trình đơn thả xuống, nó tràn vào vùng không nhìn thấy của cửa sổ và làm cho thanh cuộn ngang.

Làm cách nào tôi có thể ngừng tràn?

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

tôi tìm thấy một giải pháp:

$('.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

Tôi nghĩ rằng bạn có thể cần phải lưu trữ trong một var các heig ht trong px của thả xuống của bạn và kiểm tra y-bù đắp của nó. Bài đăng này có thể chỉ cho bạn đúng hướng How to see if an element in offscreen Tôi ước tôi có thể cung cấp cho bạn mã làm việc.

Answer 3

Hãy thử điều này

thay thế:

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

với

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

và thay thế

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

với

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

Hy vọng nó giúp

Answer 4

Các giải pháp chung cho một vấn đề như thế này là, bằng cách sử dụng CSS hoặc JavaScript, thêm một lớp học để các yếu tố trình đơn thả xuống đầu tiên hoặc cuối cùng để nó liên kết được sửa chữa. Trong trường hợp cụ thể này, với định vị tuyệt đối, việc thay đổi thuộc tính left và right sẽ thực hiện.

Ví dụ đơn giản, khi menu được căn phải và menu thả xuống bên phải nhiều nhất ra khỏi màn hình, hãy thêm một lớp có JavaScript sẽ chuyển menu từ được căn chỉnh sang bên trái của menu mục bên phải:

.dropdown ul { 
    left: 0; 
} 

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

một bản demo đơn giản này có thể được tìm thấy ở đây: http://www.jsfiddle.net/yijiang/HyXuy/1/