我试图显示列出的项目，如网站：
<ul > <li> <div > <div > <img src="/assets/img/macbook-image.png"/> </div> <h2 > Item 1 </h2> </div> </li> <li> <div> <h2> Item 2 </h2> </div> </li></ul>
和CSS：
.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; }} 但是第一个< li>消失。
如何在一个长的卷轴中显示我的内容，就像https://minimill.co/这样做？我正在网站上实施吗？任何对模仿它的更多指导或洞察将不胜感激。
提前谢谢，并接受/ upVote答案
解决方法 你应该使用min-height：100vh而不是height：100vh ;.请检查我的 fiddle// select all elements with data-background attributevar lis = document.querySelectorAll("[data-background]");// create empty arrayvar heights = [];// use for loop to "discover" all of the elements in lis arrayfor(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 scrolledwindow.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 > <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
总结以上是内存溢出为你收集整理的html – 如何使用来显示滚动内容？全部内容，希望文章能够帮你解决html – 如何使用来显示滚动内容？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）