Question

我遇到了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/一样？我是否正确地在网站上实施？任何有关模仿它的指导或见解都会受到赞赏。

Answer 1

您应该使用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

Answer 2

最简单的方法似乎是使用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＆lt; = 10和Android＆lt; = 4.3不支持。（见：caniuse）。

minimill在其网站上使用两个 <ul>标记做了什么：

<ul class="backgrounds">，它有position: fixed（喜欢自我描述的类名）;
<ul class="sections">，用于存储网站的实际内容;
和键使其全部有用：.sections li与padding: 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进行。

Answer 3

根据您提供的示例，第一个列表项应为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);
  });
});

Answer 4

您正在查看https://minimill.co/实际上是两个ul，一个用于显示背景颜色，另一个用于显示内容。似乎与背景颜色相关联的ul确实有一个跟踪窗口滚动的javascript事件监听器，根据显示的内容，显示相应的背景颜色。

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

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

Answer 5

这取决于您希望实现的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;
}

Answer 6

Link to jsFiddle
HTML代码：

$(window).on("scroll touchmove", function() {

  if ($(document).scrollTop() >= $("#one").position().top) {
    $('body').css('background', $("#one").attr("data-color"));
  };

  if ($(document).scrollTop() > $("#two").position().top) {
    $('body').css('background', $("#two").attr("data-color"))
  };

  if ($(document).scrollTop() > $("#three").position().top) {
    $('body').css('background', $("#three").attr("data-color"))
  };

  if ($(document).scrollTop() > $("#four").position().top) {
    $('body').css('background', $("#four").attr("data-color"))
  };
   if ($(document).scrollTop() > $("#five").position().top) {
    $('body').css('background', $("#five").attr("data-color"))
  };

});

的Javascript

li {
  display: block;
  width: 100%;
  height: 100vh;
}
body {
  background: #16A085;
  color: #fff;
  margin: 0;
  transition: all 550ms ease;
  will-change: background;
}

CSS

class Parent {
public void foo() throws RuntimeException {
    System.out.println("Parent with no Parameter");
}

public void foo(long a) {
    System.out.println("Parent with long");
}
}

class Child extends Parent {
public void foo() {
    System.out.println("Child with no parameter");
}

public void foo(int a) throws RuntimeException {
    System.out.println("Child with int");
}
}

class Demo {
public static void main(String... args) {
    Parent p = new Child();
    int a = 10;
    p.foo(a);
}
}

Answer 7

您所要做的就是将height: 100vh;添加到LI的样式中，您应该进行设置。

Working codepen（由于codepen不支持sass，我不得不修改CSS。

如果我误解了这个问题并且不是你要找的东西，请告诉我。

Answer 8

您可以设置ul或div的高度。另外，将overflow设置为auto：

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

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

8 个答案: