如何隐藏不在视口中的div

Question

I asked before but it was unsuccessful, so, here I'm again.

I will have a lot of divs inside container, 3 of them can be in viewport, but one div that will be next to be shown on click is half visible, now I want to ask: do you know how can I hide the element as long as it is not 100% in viewport?

 .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

I think you can fix this using a @mediaquery

if your container is 1000px:

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

Is this what you looking for?

Answer 2

In order to achieve something like that you need to have another div wrapping all block-element divs and width of the wrapping div should be more than the div which has overflow:hidden .

For Example:

I have wrapped all .block-element with .block-wrap div and set the with of .block-wrap to 5000px which is bigger than .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

Try $( 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

You can

1. get the scroll position with scrollLeft
2. get position of children with getBoundingClinetRect
3. and do simple Math to check if element is 100% inside viewport.

This is not that usable as user doesn't have a hint of elements existing to the right or left. You can modify this easily to update the opacity as the element is revealed more and reaches 1 when fully in viewport.

 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>