如何完全隱藏頁面外邊距的元素

Question

整個代碼是這樣工作的：當你進入頁面時，它是空的，但是當你向下滾動時，內容會顯示出來。

我在隱藏頁面外的元素時遇到問題。 父級具有相對位置。 該對象具有絕對位置和左：-100% 屬性。 在我為其添加邊距之前，它已完全隱藏。 我需要保證金來將 div 彼此分開。

這是我的代碼：

 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>

我希望我能很好地描述我的問題，並為班級名稱感到抱歉。 學習代碼：P

Answer 1

我解決您的問題的方法是使用CSS 變量來保存朝向視口邊緣的填充/邊距的大小，並將元素的偏移量增加更多。 要在元素之間添加間隙，您可以使用gap屬性（前提是您使用的是display: flex或display: grid ）。

旁注
首先，當使用 JS 進行樣式設置時，您應該盡量避免使用內聯樣式 ( element.style )，因為它會覆蓋 CSS 中的所有樣式，這可能是不需要的，因此很難調試，因為您的 CSS 文件本身是正確的。

其次，您似乎混淆了 CSS 類和 ID，因為您將類有效地用作 ID。 您應該嘗試將類似的樣式捆綁到一個類中，並將該類應用於多個元素（例如，請參閱下面代碼中的.container或.content ）。

而且，還有更現代的方式來設置 HTML 樣式，例如使用相對單位（例如 fr、em、rem）而不是固定單位（px），或者使用CSS Flexbox或CSS Grid來布局元素而不是使用left -/ right -properties（仍然有用，但在我看來，大多數時候應該與提到的兩種顯示樣式之一進行交換）。

而不是使用animation ，我使用了transition屬性，因為我們試圖線性地“動畫”它（或任何其他可用的計時函數），最好說我們沒有有效地使用關鍵幀功能。

此外，已經有一個指定的<main> -tag 可用，它除了為您保存一個 id 之外，還可以為您省去使 HTML 語義正確的麻煩。 嘗試使用正確的HTML標簽時可能（這並不意味着你應該避免<div> -標簽！）。

聚苯乙烯
我花時間按照我會寫的方式重寫了你的大部分代碼。

這絕不意味着我的比你的更正確。 編碼是一門藝術，不同藝術家的技術絕不比其他人優越（嗯……有時）。 這一切只是個人喜好。

 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>