Javascript 如何使用<；ul>；显示滚动内容？

我偶然发现并把它看作是我努力实现目标的一个很好的例子

我试图显示列出的项目，如网站：

.wrap{
显示：块；
列表样式：无；
位置：相对位置；
填充：0；
保证金：0；
边界：0；
李{
背景颜色：绿色；
}
}
.内容{
保证金：0自动；
最大宽度：66rem；
宽度：90%；
填充：0；
边界：0；
位置：相对位置；
}
.正确的细节{
显示：内联块；
浮动：对；
框大小：边框框；
宽度：33.33333%；
}
.左img{
显示：内联块；
浮动：左；
框大小：边框框；
宽度：66.666%；
img{
宽度：50px；
}
}

项目1


项目2

事实上，您看到的是两个ul，一个用于显示背景颜色，另一个用于显示内容。与背景颜色相关联的ul似乎有一个javascript事件监听器，它跟踪您的窗口滚动，并根据显示的内容显示相应的背景颜色

是的，你走在正确的道路上。事实上，这个特定的页面有一个非常大的顶部填充（16rem=16*16px=256px）来集中内容，并且根据窗口大小，它有不同的css类

---

关于你的问题，我试过了，第一项出现在我面前。

你所要做的就是添加

高度：100vh设置为LI的样式，并且应该设置

（我不得不稍微修改CSS，因为codepen不支持
sass
）

如果我误解了这个问题，而这不是你想要的，请告诉我
 这取决于你想从Minimill的网站上获得什么。Minimill确实有一个奇特的背景颜色变化，这是一个事件监听器-但听起来，你只是想让部分像他们一样

例如：

Section about: We are Minimill
Section about: Redspread
Section about: KPCB
...
...

如果只是希望以相同的方式创建部分，那么这可以非常容易地实现。如果您还没有听说过它，那么我将向您指出一个CSS库的方向，它为您做了很多事情。当我第一次听说它时，我想‘这听起来很麻烦’，但它真的很神奇，花几个小时了解它的工作原理可以节省多少时间

您还可以自己编写整个代码，例如：

下面是代码：

<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>

您应该使用
最小高度：100vh
而不是
高度：100vh。请检查我的


//选择具有数据背景属性的所有元素
var lis=document.queryselectoral（“[数据背景]”）；
//创建空数组
var高度=[]；
//使用for循环“发现”lis数组中的所有元素
对于（变量i=0；i
正文{
过渡：背景色。8s轻松；
-webkit过渡：背景色。8s轻松；
}
body.blue{背景色：#39f；}
body.red{背景色：#FF351A；}
body.dark{背景色：#222；}
body.yellow{背景色：#fd3；}
body.deep-blue{背景色：#417ABA；}
body.white{背景色：#fff；}
body.beige{背景色：#F7D693；}
李{
最小高度：100vh；
列表样式类型：无；
}










所以最简单的方法似乎是使用
高度：100vh，表示视口高度的百分之一。（见：）


body，ul，li{
身高：100%；
}
li{高度：100vh；}
ul{列表样式类型：无；}
.a{背景色：红色；}
.b{背景色：黄色；}
.c{背景色：黑色；}
.d{背景色：绿色；}
.e{背景色：橙色；}
.f{背景色：粉红色；}









根据您提供的示例，第一个列表项应为
高度：100vh和其他项目的高度将基于内容本身。在下面的代码中，我添加了一个脚本，当单击“Scroll Down”（向下滚动）锚标记时，它会从第一项滚动到第二项

看看我的

这是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>

$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;
}

$(document).ready(function(){
  $("#scroll-down").click(function() {
    $('html, body').animate({
      scrollTop: $("#scrollto").offset().top
    }, 1000);
  });
});

这里有一点JQuery:

<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>

$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;
}

$(document).ready(function(){
  $("#scroll-down").click(function() {
    $('html, body').animate({
      scrollTop: $("#scrollto").offset().top
    }, 1000);
  });
});



HTML代码：

<ul>
<li id="one" data-color="#16A085">
<h2>Section One</h2>
</li>
<li id="two" data-color="#C0392B">
  <h2>Section Two</h2>
</li>
<li id="three" data-color="#ff44AD">
  <h2>Section Three</h2>
</li>
<li id="four" data-color="#f88f18">
  <h2>Section Four</h2>
</li>
<li id="five" data-color="#E91E63">
  <h2>Section Five</h2>
</li>

</ul>

CSS

您可以设置ul或div的高度。
另外，将溢出设置为自动：

<ul style="width: 300px; height: 200px; overflow: auto">
  <li>items</li>
  <li>items</li>


项目
项目
你的意思更像这样