[英]Particleground.js: how to make website scrollable
我正在建立一个网站并打算使用
Particleground.js
我网站入口处的插件。 我已经在这里下载了它,并根据演示文件使用了它。 但是在演示中,只有一个<div>
,因此它们具有全屏粒子+文本。 虽然我需要这样的东西是 ,即滚动登陆页面,顶部颗粒。 在此先感谢您的帮助!
这就是我的容器目前的样子:
<div id="particles">
<div class="uk-section uk-uk-padding-medium" id="intro">
<div class="uk-container uk-padding-large">
<!-- content here -->
</div>
</div>
</div>
然后跟随下一个容器,我将无法滚动到那里!
以下是CSS设置:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
#particles {
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
#intro {
position: absolute;
left: 0;
top: 50%;
padding: 0 20px;
width: 100%;
text-align: center;
}
因此,我们发现了问题所在(容易)。 在CSS中应该是这样的:
html, body {
width: 100%;
height: 100%;
/* overflow: hidden; */
}
此overflow:hidden;
使事情变得如此复杂,因此只需将其删除即可。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.