嗨，我正在學習 html/css 和 javascript，我想我的 html 結構有問題。基本上我想要做的是我的粒子影片在滾動頁面時停留在網站上。我有一個 Javascript 檔案，它執行 getElementById('particles') 在 div 上運行畫布，但它只停留在第一頁上。
我試圖將“粒子”div 移動為包含所有部分的主 div，但它沒有用。
如果有人感興趣，這里是檔案的存盤庫：https : //github.com/DanielVillacis/DanielVillacis.github.io
這是我的 html 結構：
document.addEventListener('DOMContentLoaded', function() {
particleground(document.getElementById('particles'), {
dotColor: '#FFFFFF',
lineColor: '#FFFFFF'
});
var intro = document.getElementById('intro');
intro.style.marginTop = -intro.offsetHeight / 2 'px';
}, false);html,
body {
width: 100%;
height: 100vh;
}
canvas {
display: inline-block;
vertical-align: baseline;
}
header,
section {
display: block;
}
#particles {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
}
.container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
section {
height: 100vh;
width: 100%;
display: inline-block;
scroll-snap-align: start;
}<body>
<div class="container">
<main role="main">
<section class="intro">
<div id="particles">
<header class="splash" id="splash" role="banner">
<div id="intro">
</div>
</header>
</div>
</section>
<section class="AboutMe">
<div class="introduction">
</div>
</section>
<section class="box">
<div class="projectContainer">
</div>
</section>
<section class="Contact">
<h2 class="ContactTitle">Contact</h2>
<div class="contactLinks">
</div>
</section>
</main>
</div>
</body>uj5u.com熱心網友回復：
使用 CSSposition: fixed;屬性。
將 position 設定為 fixed 時，您的畫布將相對于視口定位，因此在滾動時會保持均勻。
.pg-canvas {
display: block;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
width: 100%;
height: 100vh;
}uj5u.com熱心網友回復：
您已將粒子（顯示在畫布上）放入將滾動到視圖之外的部分。
您正在使用的粒子庫將這個畫布放置在您給它的元素之前，該元素具有 id 粒子。
您可以通過添加position: fixed到樣式表中的畫布選擇器來修復畫布（注意是否有其他畫布以提供更明確的選擇器）。
這將在許多情況下用于將帶有粒子的畫布固定到視口。但請注意MDN 中的此描述
該元素已從正常檔案流中移除，并且不會在頁面布局中為該元素創建空間。它相對于視口建立的初始包含塊定位，除非其祖先之一的變換、透視或過濾器屬性設定為除無以外的其他屬性（請參閱 CSS 變換規范），在這種情況下，祖先的行為為包含塊。（請注意，瀏覽器與透視和過濾器的不一致導致包含塊的形成。）它的最終位置由頂部、右側、底部和左側的值決定。
你現在沒問題，因為你用 top 移動介紹，但如果那是翻譯，你必須把畫布放在介紹之外。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/398148.html
標籤：javascript html css html5-canvas