嗨，我正在学习 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 中的此描述
你现在没问题，因为你用 top 移动介绍，但如果那是翻译，你必须把画布放在介绍之外。
0 评论