Как использовать <ul> для отображения содержимого прокрутки?

Я наткнулся на https://minimill.co/ и увидел, что это хороший пример того, чего я пытаюсь достичь.

Я попытался отобразить перечисленные элементы, такие как сайт:

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

и 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/? Правильно ли я это делаю на сайте? Любое руководство или проницательность в подражании ему будут оценены.

Заранее благодарю вас и ответьте/ответьте

Ответ 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 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 the user 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>

Ответ 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>

Ответ 3

В соответствии с приведенным вами примером, первый элемент списка должен быть height: 100vh;, а высота других элементов будет основываться на самом содержимом. В приведенном ниже коде я добавил немного script, который прокручивается от первого элемента ко второму при нажатии на тег привязки "Прокрутка вниз".

Откажитесь от 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);
  });
});

Ответ 4

То, что вы смотрите на https://minimill.co/, фактически является двумя ul, один используется для отображения цвета фона, а другой - используется для показа содержимого. Кажется, что ul, связанная с цветом фона, имеет прослушиватель событий javascript, который отслеживает прокрутку окна и в зависимости от того, какой контент отображается, отображается соответствующий цвет фона.

Да, вы на правильном пути. Фактически, эта конкретная страница имеет очень большое верхнее дополнение (16rem = 16 * 16px = 256px) для централизации содержимого и в зависимости от размера окна, оно имеет разные классы css.

Относительно вашего вопроса, я попробовал, и первый элемент мне кажется.

Ответ 5

Это зависит от того, что из сайта Minimill, которого вы хотите достичь. У Minimill действительно есть это фантастическое изменение цвета фона, которое является прослушивателем событий - но похоже, что вы просто хотите иметь разделы так же, как они?

Например:

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

Если это так, что вы хотите иметь разделы таким же образом, то это может достичь довольно легко. Если вы не слышали об этом, я бы указал вам в сторону Bootstrap, который является CSS-библиотекой, которая делает A ЛЕТ для вас. Когда я впервые услышал об этом, я подумал: "Это звучит как хлопот, чтобы заглянуть", - но это действительно довольно волшебное, сколько времени вы спасете, потратив пару часов на понимание того, как это работает.

Вы также можете сами кодировать все, например: 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;
}

Ответ 6

Ссылка на jsFiddle
Код 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>

Javascript

$(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"))
  };

});

CSS

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

Ответ 7

Все, что вам нужно сделать, это добавить height: 100vh; в стиль для LI, и вы должны быть установлены.

Рабочий код (мне пришлось немного модифицировать CSS, поскольку codepen не поддерживает sass).

Если я неправильно понял вопрос и что не то, что вы ищете, дайте мне знать.

Ответ 8

Вы можете установить высоту ul или div. Кроме того, установите автоматическое переполнение:

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