如果超出視口，如何移動絕對定位元素？

Question

我有很多不同寬度的盒子。 所有這些都顯示為inline-block因此隨着窗口寬度的變化它們將以不同的方式分布。

每個盒子都有一個很大的工具提示，將在懸停時顯示。 這些工具提示具有固定的寬度和高度，所有盒子都相同。

這些工具提示的position:absolute在方框上，並以：

left: 50%;
margin-left: -halfwidth; 

我的問題是，如果盒子靠近窗口向左或向右，它們將被部分隱藏（我沒有頂部和底部的問題，它們永遠不會到達那些邊緣）

是否有任何簡單的方法使用javascript（更好的是jquery）來檢測元素何時離開視口然后相應地更改left屬性以防止它？

任何幫助，提示或評論都將大大貶值。 謝謝

的jsfiddle

 html, body {margin:0;padding:0;height:100%;} ul { width:100%; text-align:center; position:relative; top:50%; transform:translateY(-50%); padding:0; } li { display: inline-block; background-color: red; width: 100px; height: 25px; margin-right: 10px; position: relative; } .hover-element { position: absolute; background-color: yellow; z-index: 9999; width: 350px; height: 175px; left: 50%; margin-left: -175px; bottom:25px; display: none; border:1px solid #000; } li:hover .hover-element { display: block; } .hover-element:hover { visibility: hidden; } 

 <ul> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> </ul> 

Answer 1

多數民眾贊成你需要的，我檢測到div的偏移左側位置，並將類添加到li和css中的小調整。

 $("li").mouseenter(function(){ var f = $(this).find('.hover-element'); var rightEdge = f.width() + f.offset().left; var leftEdge = f.offset().left; var screenWidth = $(window).width(); if(leftEdge < 0){ $(this).addClass("left"); $(this).removeClass("right"); } else if(rightEdge > screenWidth){ $(this).addClass("right"); $(this).removeClass("left"); } else{ $(this).removeClass("right lefft"); } }); $("li").mouseleave(function(){ $(this).removeClass("right lefft"); }) 

 html, body {margin:0;padding:0;height:100%;} ul { width:100%; text-align:center; position:relative; top:50%; transform:translateY(-50%); padding:0; } li { display: inline-block; background-color: red; width: 100px; height: 25px; margin-right: 10px; position: relative; } .hover-element { position: absolute; background-color: yellow; z-index: 9999; width: 350px; height: 175px; left: 50%; margin-left: -175px; bottom:25px; display: none; border:1px solid #000; } li.left .hover-element{ left: 0; margin-left: 0; } li.right .hover-element{ margin-left: 0; left: auto; right: 0; } li:hover .hover-element { display: block; } .hover-element:hover { visibility: hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> </ul> 

Answer 2

看一看：

 var windowWidth = document.body.scrollWidth || window.innerWidth; $('li').on('mouseenter', function(e){ var $hover = $(this).find('.hover-element'); var coords = $hover[0] && $hover[0].getBoundingClientRect(); var rightDistance = 0; if (coords.left <= 0) { $hover.css({ 'left': ($hover.css('left').split('px')[0] - coords.left) + 'px' }) } rightDistance = windowWidth - coords.left - $hover.width() - 2 * $hover.css('borderWidth').split('px')[0]; if (rightDistance < 0) { $hover.css({ 'left': ($hover.css('left').split('px')[0] - (-rightDistance)) + 'px' }) } $('p').html($hover.css('left') + '/' + coords.left) }) 

 html, body {margin:0;padding:0;height:100%;overflow-x: hidden;} ul { width:100%; text-align:center; position:relative; top:50%; transform:translateY(-50%); padding:0; } li { display: inline-block; background-color: red; width: 100px; height: 25px; margin-right: 10px; position: relative; } .hover-element { position: absolute; background-color: yellow; z-index: 9999; width: 350px; height: 175px; left: 50%; margin-left: -175px; bottom:25px; display: none; border:1px solid #000; } li:hover .hover-element { display: block; } .hover-element:hover { visibility: hidden; } 

 <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <ul> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> </ul> 

Answer 3

以下鏈接是您問題的起點（如果不是實際答案）。

是否有任何簡單的方法使用javascript（更好的是jquery）來檢測元素何時離開視口然后相應地更改左屬性以防止它？

如何判斷DOM元素在當前視口中是否可見？

使用jQuery在屏幕上的元素的絕對位置

Answer 4

我要提到這里的步驟。 如果您需要代碼，只需要它。 我目前在移動設備上，所以輸入代碼會很難！

腳步

• 為了簡化包含JS，使用JS更改display屬性。 使用每個列表項上的鼠標事件來完成此操作，這會更改其各自的工具提示的顯示屬性。 （ 以下是如何訪問相應的孩子）

在同一個懸停事件中，執行以下操作：

• 更改顯示后，檢查工具提示元素是否在視口中。 您可以參考Victor Medeiros提供的鏈接。

• 如果未完全在視口中， 請將margin-left屬性更改為 -175px - (the number of pixels it crossed the boundary by) 。 我剛剛意識到，如果它穿過視口，只需將margin-left或margin-right（如果適用，通過getBoundingClientRect找到它）設置為0。

是的，就是這樣！ 我希望這應該有效，我還沒試過。 結果是什么？

Answer 5

更改

li {
    display: inline-block;
    background-color: red;
    width: 100px;
    height: 25px;
    margin-right: 10px;
    position: relative;
}

惠特

li {
    display: inline-block;
    background-color: red;
    width: 100px;
    height: 25px;
    margin-right: 10px;
    position: static;
}