如何使用<ul>显示滚动内容？
如何使用<ul>显示滚动内容？
提问于 2017-02-15 04:21:20
我偶然发现了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/那样在一个很长的卷轴中显示我的内容呢？我是不是按照网站上实现的那样做了？任何关于更接近地模仿它的指导或见解都将不胜感激。
回答 6
Stack Overflow用户
发布于 2017-02-21 17:20:11
您应该使用min-height:100vh而不是height:100vh;。请查看我的fiddle
// 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;。请查看我的fiddle
Stack Overflow用户
发布于 2017-02-15 05:02:37
您看到的https://minimill.co/实际上是两个ul，一个用于显示背景颜色，另一个用于显示内容。似乎与背景颜色相关联的ul确实具有跟踪窗口滚动的javascript事件侦听器，并且根据所显示的内容，显示相应的背景颜色。
是的，你走在正确的道路上。事实上，这个特殊的页面有一个非常大的顶部填充(16rem = 16 * 16px = 256px)来集中内容，并且根据窗口的大小，它有不同的css类。
关于你的问题，我确实试过了，第一条出现在我面前。
Stack Overflow用户
发布于 2017-02-21 10:54:50
这取决于你想从Minimill的网站上获得什么。Minimill确实有花哨的背景颜色变化，这是一个事件监听器-但听起来像是，你只是想要有他们做的部分？
例如：
Section about: We are Minimill
Section about: Redspread
Section about: KPCB
...
...如果只是想以相同的方式拥有部分，那么可以很容易地实现。如果你没有听说过它，那么我会向你指出Bootstrap的方向，这是一个为你做了很多事情的CSS库。当我第一次听说它的时候，我想“这听起来很麻烦”，但它真的很神奇，花几个小时了解它的工作原理可以节省多少时间。
您还可以自己编写整个代码，例如：https://jsfiddle.net/2awczzcc/2/
下面是代码：
<ul class="wrap">
<li>
<div class="content">
<div class="left-container">
<img src="http://vignette2.wikia.nocookie.net/fantheories/images/4/43/Toy-Story-Theme-Song-6.jpg/revision/latest?cb=20140624192735"/>
</div>
<div class="right-container">
<h2>
Item 1
</h2>
<p>
Text text text.
</p>
</div>
</div>
</li>
<li>
<div class="content">
<div class="left-container">
<img src="http://vignette2.wikia.nocookie.net/fantheories/images/4/43/Toy-Story-Theme-Song-6.jpg/revision/latest?cb=20140624192735"/>
</div>
<div class="right-container">
<h2>
Item 2
</h2>
<p>
Text text text.
</p>
</div>
</div>
</li>
<li>
<div class="content">
<div class="left-container">
<img src="http://vignette2.wikia.nocookie.net/fantheories/images/4/43/Toy-Story-Theme-Song-6.jpg/revision/latest?cb=20140624192735"/>
</div>
<div class="right-container">
<h2>
Item 2
</h2>
<p>
More text, more text, more text.
</p>
</div>
</div>
</li>
</ul>和CSS：
.wrap {
display: block;
list-style: none;
position: relative;
padding: 0;
margin: 0;
border: 0;
width: 100%;
}
.wrap li {
width: 100%;
clear: both;
display: block;
min-height: 200px;
float: left;
margin: 0;
padding: 0;
}
.wrap li:first-child {
background-color: green;
}
.wrap li:nth-child(2) {
background-color: blue;
}
.wrap li:nth-child(3) {
background-color: yellow;
}
.content {
margin: 0 auto;
max-width: 66rem;
width: 90%;
padding: 0;
border: 0;
position: relative;
}
.left-container {
float: left;
width: 48%;
overflow: hidden;
}
.right-container {
float: right;
width: 48%;
overflow: hidden;
}
.left-container img {
display: inline-block;
float: left;
box-sizing: border-box;
max-width: 100%;
height: auto;
margin: 25px 0 0 0;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42235470
复制相关文章
相似问题