如何隱藏不在視口中的div

Question

我之前曾問過，但沒有成功，所以，我又來了。

我將在容器中有很多div，其中3個可以在視口中，但單擊時將要顯示的一個div可見一半，現在我想問一問：您知道如何將元素隱藏為只要它不是100％的視口？

 .container{ width:1000px; white-space:no-wrap; overflow:hidden; } .block-element{ width:300px; display: inline-block; } 

 <div class="container"> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> </div> 

Answer 1

我認為您可以使用@mediaquery修復此問題

如果您的容器為1000像素：

@media screen and (max-width:999px) { .element {visibility: hidden;} }

這是您要找的東西嗎？

Answer 2

為了實現這樣的目標，您需要讓另一個div包裝所有塊元素div，並且包裝div的寬度應大於具有overflow:hidden的div。

例如：

我已包裹所有.block-element與.block-wrap DIV並設置與.block-wrap到5000px比更大.container

 .container{ width:1000px; white-space:no-wrap; overflow:hidden; } .block-wrap{ width:5000px; } .block-element{ width:300px; display: inline-block; } 

 <div class="container"> <div class="block-wrap"> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> </div> </div> 

Answer 3

嘗試$（window）.width（）;

 $(function() { var window_width = $( window ).width(); $('.container').width(window_width); }); 

 .container{ width:1000px; white-space:no-wrap; overflow:hidden; } .block-element{ width:300px; display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div class="container"> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> </div> 

Answer 4

您可以

1. 使用scrollLeft獲取滾動位置
2. 使用getBoundingClinetRect獲取孩子的位置
3. 並執行簡單的數學運算以檢查元素是否在視口內100％。

這不是可用的，因為用戶沒有左右兩側存在的元素提示。 您可以輕松地修改此選項，以更新不透明度，因為元素會顯示得更多，並且在完全位於視口中時達到1。

 window.onscroll = window.onload = function() { console.log('scrolled'); document.querySelectorAll('.block-element').forEach(setOpacity); } function setOpacity(e) { var scrollAdjust = document.querySelector('body').scrollLeft; var left = e.getBoundingClientRect().left; var right = e.getBoundingClientRect().right; var adjustedLeft = left + scrollAdjust; var adjustedRight = right + scrollAdjust; var maxRight = document.querySelector('body').getBoundingClientRect().width; console.log(maxRight); var leftOverflow = left; var rightOverflow = maxRight - right; if (leftOverflow < 0 || rightOverflow < 0) { e.style.visibility = "hidden"; } else { e.style.visibility = "visible"; } } 

 .container { width: 1000px; white-space: no-wrap; overflow: hidden; } .block-element { width: 300px; display: inline-block; border: 1px solid red; } 

 <div class="container"> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> <div class="block-element">lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div> </div>