如何使用<ul>显示滚动内容？
Jo *_* Ko 15 html javascript css html5 css3
我遇到了https://minimill.co/,并将其视为我正在努力实现的一个很好的例子.
我试图显示列出的项目,如网站:
.wrap {
display: block;
list-style: none;
position: relative;
padding: 0;
margin: 0;
border: 0;
li {
background-color: green;
}
}
.content {
margin: 0 auto;
max-width: 66rem;
width: 90%;
padding: 0;
border: 0;
position: relative;
}
.right-details {
display: inline-block;
float: right;
box-size: border-box;
width: 33.33333%;
}
.left-img {
display: inline-block;
float: left;
box-sizing: border-box;
width: 66.66666%;
img {
width: 50px;
}
}<ul class="wrap">
<li>
<div class="content">
<div class="left-img">
<img src="/assets/img/macbook-image.png"/>
</div>
<h2 class="right-details">
Item 1
</h2>
</div>
</li>
<li>
<div>
<h2>
Item 2
</h2>
</div>
</li>
</ul>但第一个<li>消失了.
如何在一个长卷轴中显示我的内容 - 就像https://minimill.co/一样？我是否正确地在网站上实施？任何有关模仿它的指导或见解都将受到赞赏.
Mat*_*nit 11
你应该使用min-height:100vh而不是height:100vh;.请检查我的小提琴
// select all elements with data-background attribute
var lis = document.querySelectorAll("[data-background]");
// create empty array
var heights = [];
// use for loop to "discover" all of the elements in lis array
for(var i = 0; i < lis.length; i++){
// get element's distance from top
var distanceFromTop = lis[i].offsetTop;
// get value from data-backgrount attribute
var background = lis[i].getAttribute("data-background");
// push background and distance to heights array
heights.push({background: background, distance: distanceFromTop});
};
// check if page was scrolled
window.addEventListener("scroll", function(evt){
// if page was scrolled what's the user's distance from top
var distanceFromTop = this.scrollY;
// find distances in heights array
heights.forEach(function(height) {
// check if user reached another checkpoint
if(height.distance < distanceFromTop) {
// if so, change the background to value that we got from data-background attribute
//
document.body.className = height.background;
}
});
});body {
transition: background-color .8s ease;
-webkit-transition: background-color .8s ease;
}
body.blue { background-color: #39f; }
body.red { background-color: #FF351A; }
body.dark { background-color: #222; }
body.yellow { background-color: #fd3; }
body.deep-blue { background-color: #417ABA; }
body.white { background-color: #fff; }
body.beige { background-color: #F7D693; }
li {
min-height: 100vh;
list-style-type:none;
}<body class="blue">
<ul>
<li data-background="blue"></li>
<li data-background="red"></li>
<li data-background="dark"></li>
<li data-background="yellow"></li>
<li data-background="deep-blue"></li>
<li data-background="white"></li>
<li data-background="beige"></li>
</ul>
</body>你应该使用min-height:100vh而不是height:100vh;.请检查我的小提琴
最简单的方法似乎是使用height: 100vh;,它代表视口高度的百分之一.(见:quirksmode.org).
body, ul, li {
height: 100%;
}
li { height: 100vh; }
ul { list-style-type: none; }
.a { background-color: red; }
.b { background-color: yellow; }
.c { background-color: black; }
.d { background-color: green; }
.e { background-color: orange; }
.f { background-color: pink; }<body>
<ul>
<li class="a"></li>
<li class="b"></li>
<li class="c"></li>
<li class="d"></li>
<li class="e"></li>
<li class="e"></li>
</ul>
</body>但是: IE <= 10且Android <= 4.3不支持.(见:caniuse).
什么小型轧机在他们的网站确实是使用2个 <ul>标签:
<ul class="backgrounds">有它position: fixed(爱自我描述的类名);<ul class="sections">它存储网站的实际内容;- 以及使它全部工作的关键:
.sections liwithpadding: 16rem 0 0;(表示:)padding-top: 16rem;.它全部根据他们使用的图像需求进行定制.
看这里:
body, li, ul { /* RESET */
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
html, body { height: 100%; }
body {
line-height: 1.5;
position: relative;
}
ul { list-style-type: none; }
.backgrounds {
height: 100%;
display: block;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1;
}
.backgrounds li {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: .5s ease opacity;
width: 100%;
z-index: 1;
}
.sections {
position: relative;
transition: .5s ease opacity;
z-index: 2;
}
.sections li { padding: 16rem 0 0; }
.a { background-color: red; }
.b { background-color: yellow; }
.c { background-color: black; }
.d { background-color: green; }
.e { background-color: orange; }
.f { background-color: pink; }<body>
<ul class="backgrounds">
<li class="a"></li>
<li class="b"></li>
<li class="c"></li>
<li class="d"></li>
<li class="e"></li>
<li class="f"></li>
</ul>
<ul class="sections">
<li class="a"><p>Lorem ipsum dolor sit amet;</p></li>
<li class="b"><p>Lorem ipsum dolor sit amet;</p></li>
<li class="c"><p>Lorem ipsum dolor sit amet;</p></li>
<li class="d"><p>Lorem ipsum dolor sit amet;</p></li>
<li class="e"><p>Lorem ipsum dolor sit amet;</p></li>
<li class="f"><p>Lorem ipsum dolor sit amet;</p></li>
</ul>
</body>此外,所有后台交换都是用JS完成的.
小智 6
根据您提供的示例,第一个列表项应该是height: 100vh;,其他项的高度将基于内容本身.在下面的代码中,我添加了一些脚本,当单击"向下滚动"锚标记时,该脚本从第一项滚动到第二项.
看看我的jsfiddle.
这是HTML:
<ul id="wrap">
<li>
<div>
<h2>Item 1</h2>
<div id="scroll-down">
<a href="javascript:void(0)">Scroll Down</a>
</div>
</div>
</li>
<li id="scrollto">
<div>
<h2>Item 2</h2>
</div>
</li>
<li>
<div>
<h2>Item 3</h2>
</div>
</li>
</ul>
这是SCSS:
$width: 100%;
$height: 100%;
html, body {
width: $width;
height: $height;
margin: 0;
padding: 0;
}
#wrap {
display: inline-block;
list-style: none;
padding: 0;
margin: 0;
width: $width;
height: $height;
li {
display: block;
overflow: hidden;
position: relative;
width: $width;
}
li:first-child {
background-color: green;
height: 100vh;
}
li:not(:first-child) {
min-height: 400px;
}
li:nth-child(2) {
background-color: lightgreen;
}
li:last-of-type {
background-color: lightblue;
}
}
h2 {
margin-top: 0;
}
#scroll-down {
position: absolute;
bottom: 15px;
width: $width;
}
#scroll-down a {
display: block;
text-align: center;
color: #ffffff;
}
这里有一些JQuery:
$(document).ready(function(){
$("#scroll-down").click(function() {
$('html, body').animate({
scrollTop: $("#scrollto").offset().top
}, 1000);
});
});
你看到的https://minimill.co/实际上是两个ul，一个用于显示背景颜色，另一个用于显示内容。似乎与背景颜色关联的 ul 确实有一个 javascript 事件侦听器，可以跟踪窗口滚动，并根据显示的内容显示相应的背景颜色。
是的，您走在正确的道路上。事实上，这个特定的页面有一个非常大的顶部填充（16rem = 16 * 16px = 256px）来集中内容，并且根据窗口大小，它有不同的 css 类。
关于你的问题，我确实尝试过，第一个项目出现在我面前。