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

如何在一个长卷轴中显示我的内容 - 就像https://minimill.co/一样？我是否正确地在网站上实施？任何有关模仿它的指导或见解都将受到赞赏.

你应该使用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 
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;
}


  

    

    

    

    

    

    

    

  



2> wscourge..：
最简单的方法似乎是使用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; }


    

        

        

        

        

        

        


    



3> 小智..：
根据您提供的示例,第一个列表项应该是height: 100vh;,其他项的高度将基于内容本身.在下面的代码中,我添加了一些脚本,当单击"向下滚动"锚标记时,该脚本从第一项滚动到第二项.

看看我的jsfiddle.

这是HTML:


  

    

      
Item 1
      

        Scroll Down
      
    
  
  

    

      
Item 2
    
  
  

    

      
Item 3
    
  



这是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);
  });
});