How to completely hide an element with margin outside the page

Question

The whole code works like this: when you enter the page, it's empty, but when u scoll down, content shows up.

I have a problem with hiding an element outside the page. The parent has position relative. THe object has position absolute and left: -100% property. It was completely hidden before I added a margin to it. I need margin to seperate divs from each other.

This is my code:

 document.addEventListener("DOMContentLoaded", function() { window.onscroll = function() { var y = window.scrollY; var x = document.querySelector(".main-inner2-container").getBoundingClientRect().top; var z = window.innerHeight / 2; if (z > x) { document.querySelector(".main-inner2-content1").style.animation = "FadeIn 0.5s linear 0s 1 forwards"; document.querySelector(".main-inner2-container2-inner1-content").style.animation = "MoveInFromLeft 0.5s ease-out 0s 1 forwards"; document.querySelector(".main-inner2-container2-inner2-content").style.animation = "MoveInFromRight 0.5s ease-out 0s 1 forwards"; document.querySelector(".main-inner2-container3-inner1-content").style.animation = "MoveInFromLeft 0.5s ease-out 0s 1 forwards"; document.querySelector(".main-inner2-container3-inner2-content").style.animation = "MoveInFromRight 0.5s ease-out 0s 1 forwards"; } }; });

 * { margin: 0; padding: 0; box-sizing: border-box; } .main { display: block; margin: auto; height: 1000px; width: 100%; background-color: grey; } .main-inner1 { display: block; margin: auto; height: 600px; width: 100%; background-color: orange; } .main-inner2 { display: block; margin: auto; width: 100%; background-color: green; padding: 12px; } .main-inner2-container { display: block; position: relative; height: 50px; width: 200px; overflow: hidden; margin: auto; z-index: 9998; margin: 12px auto 12px auto; } .main-inner2-content1 { display: block; position: absolute; right: 100%; margin: auto; height: 100%; width: 100%; background-color: blue; } .main-inner2-container2 { display: flex; justify-content: space-around; } .main-inner2-container2-inner1 { flex-grow: 1; margin: 12px; height: 300px; position: relative; } .main-inner2-container2-inner1-content { position: absolute; width: 100%; height: 300px; left: -100%; background-color: red; } .main-inner2-container2-inner2 { flex-grow: 2; margin: 12px; height: 300px; position: relative; } .main-inner2-container2-inner2-content { position: absolute; width: 100%; height: 300px; right: -100%; background-color: red; } .main-inner2-container3 { display: flex; justify-content: space-around; } .main-inner2-container3-inner1 { flex-grow: 2; margin: 12px; height: 300px; position: relative; } .main-inner2-container3-inner1-content { position: absolute; width: 100%; height: 300px; left: -100%; background-color: red; } .main-inner2-container3-inner2 { flex-grow: 1; margin: 12px; height: 300px; position: relative; } .main-inner2-container3-inner2-content { position: absolute; width: 100%; height: 300px; right: -100%; background-color: red; } @keyframes FadeIn { 0% { right: 100%; } 100% { right: 0; } } @keyframes MoveInFromLeft { 0% { left: -100%; } 100% { left: 0; } } @keyframes MoveInFromRight { 0% { right: -100%; } 100% { right: 0; } }

 <div class="main"> <div class="main-inner1"></div> <div class="main-inner2"> <div class="main-inner2-container"> <div class="main-inner2-content1"></div> </div> <div class="main-inner2-container2"> <div class="main-inner2-container2-inner1"> <div class="main-inner2-container2-inner1-content"></div> </div> <div class="main-inner2-container2-inner2"> <div class="main-inner2-container2-inner2-content"></div> </div> </div> <div class="main-inner2-container3"> <div class="main-inner2-container3-inner1"> <div class="main-inner2-container3-inner1-content"></div> </div> <div class="main-inner2-container3-inner2"> <div class="main-inner2-container3-inner2-content"></div> </div> </div> </div> </div>

I hope I described my problem well and sorry for the class names. Code for learning :P

Answer 1

The way I solved your problem was to use CSS Variables to save the size of the padding/margin towards the viewport-edge, and increase the offset of the elements by that much more. And to add gaps between the elements you can use the gap -property (provided you are using display: flex or display: grid ).

Sidenotes
First off, when styling with JS, you should try to avoid using inline styling ( element.style ) because that overrides all stylings from your CSS, which might be unwanted and thus hard to debug because your CSS file itself is correct.

Secondly, you seem to confuse CSS Classes and IDs, because you are using your classes effectively as IDs. You should try to bundle similar stylings into one class and apply that class to multiple elements (eg see .container or .content in my code below).

And also, there are more modern ways to style your HTML, like using relative units (eg fr, em, rem) instead of fixed units (px), or using CSS Flexbox or CSS Grid to lay out your elements instead of using the left -/ right -properties (which are still useful, but in my opinion should most of the times be exchanged with one of the two mentioned display-styles).

And instead of using the animation , I used the transition -property since we are trying to "animate" it linearly (or any of the other available timing functions), better said we are not using the keyframes feature effectively.

Also, there already is a designated <main> -tag available, which apart from saving you an id also saves you the hassle of making your HTML semantically correct. Try to use the correct HTML-tags when possible (which does not mean that you should avoid the <div> -tag!).

PS
I took the time to rewrite most of your code the way I would have written it.

This does in no way mean that mine is more correct than yours. Coding is art, and techniques of different artists are in no way superior to the others (well... sometimes). It's all just personal preference.

 window.addEventListener("load", function() { window.addEventListener("scroll", function() { let mainContentTop = document.querySelector("main > div") .getBoundingClientRect().top; const vh = window.innerHeight; if (vh / 2 > mainContentTop) { for (let el of document.querySelectorAll("main *.move-in")) { el.classList.remove("out-left"); el.classList.remove("out-right"); } } }); });

 body { margin: 0; display: flex; flex-flow: column; overflow-x: hidden; } main { display: flex; flex-flow: column; } main::before { content: ""; height: 100vh; background: orange; } main > div { --main-div-padding: 0.8em; padding: var(--main-div-padding); display: flex; flex-flow: column; gap: var(--main-div-padding); background-color: green; } main header { align-self: center; display: flex; height: 3.125rem; width: 12.5rem; overflow: hidden; } main header > div { width: 100%; transform: translate(-100%); transition: transform 0.5s; background-color: blue; } main header > div.move-in.out-left {transform: translate(-100%)} main .container { height: 18.75rem; display: grid; gap: var(--main-div-padding); } main .content { width: 100%; background: red; } main .container:nth-of-type(odd) {grid-template-columns: 1fr 2fr} main .container:nth-of-type(even) {grid-template-columns: 2fr 1fr} /* Tool-classes */ .move-in { transform: translateX(0); transition: transform 0.5s; } main > div *.move-in.out-left { transform: translateX(calc(-100% - var(--main-div-padding))); } main > div *.move-in.out-right { transform: translateX(calc(100% + var(--main-div-padding))); }

 <main> <div> <header> <div class="move-in out-left"></div> </header> <div class="container"> <div class="content move-in out-left"></div> <div class="content move-in out-right"></div> </div> <div class="container"> <div class="content move-in out-left"></div> <div class="content move-in out-right"></div> </div> </div> </main>