如何创建可以视口尺寸递增而向下跳动的滚动条

问题描述

我正在尝试使用html和css编写一个非常基本的网站。每次滚动时，我都希望它滚动窗口的整个长度，并出现一个新的段落（居中）。我画了一幅画来传达这个想法。到目前为止，这是我想出的代码，我正在空白。我已经有将近2年没有打开文本编辑器了，这是我的第一个项目。我需要帮助。

即使您能给我语言，以便我能更好地找到有关如何实现我要实现的目标的教程...也很棒。 :) Thnx

现在我的居中文字已修复，我知道这是个问题。

html {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%;

}

article {
  width: 42.5%;
  margin: auto;

}


p {
  font-size: 12pt;
  font-family: Times New Roman;
}


a {
  text-decoration: none;
}


.content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}


.menu a {
  display:block;
  color: #000000;
}

.menu a:hover{
  text-decoration: underline;
  color: #000000;
  
}

.menu {
  float: right;
  clear: left;
  text-align: right;
}

<!DOCTYPE html>
<html>
  <head>
    <Meta charset="utf-8">
    <title>hellomynameischristian</title>
    <link rel="stylesheet" type="text/css" href="../css/hellomynameischristian.css">

  </head>
  
    <body>
      
      
      
      <div class="menu">
        <a href="../html/hellomynameischristian.html">homepage</a>
        <a href="https://www.behance.net/christianmorgan2">design portfolio</a>
        <a href="https://www.instagram.com/christian.m.morgan/">follow me on ig</a>
      </div>
      
      <div class="content">
         <p>
                     Centered text.


            </p>
          
        
      </div>
           
      
  
   
   
          
    
  
  
  
    </body>
</html>

Sketch of desired webpage layout

解决方法

根据您的草图，我添加了：

一个导航容器，其中包含position: fixed，top: 20px和right: 20px的菜单元素使用适合您需要的值。同样display: flex，因此项目显示为行。请记住，这些值将添加到<ul>标记中，而不是<nav>中。
三个具有文本内容的div容器。每个div都有display: flex，justify-content: center和align-items: center，它们会将子元素水平居中并垂直于中心。
每个div容器将具有width: 100%和height: 100vh ，因此请删除在CSS样式中添加到HTML的高度和宽度值。

希望这可以清除您的情况，请使用flexbox，他是您的新朋友。

这是一个片段：

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.part1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-color: #2980b9;
}

.menu {
  display: flex;
  position: fixed;
  top: 20px;
  right: 20px;
}

.menu li {
  margin-left: 10px;
}

.part2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-color: #2c3e50;
}

.part3 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-color: #16a085;
}

  <nav>
    <ul class="menu">
      <li>Home</li>
      <li>Item1</li>
      <li>Item3</li>
      <li>Item4</li>
      <li>Item5</li>
    </ul>
  </nav>

  <section class="part1">
    <p>I am centered</p>
  </section>

  <section class="part2">
    <p>I am centered</p>
  </section>

  <section class="part3">
    <p>I am centered</p>
  </section>

之后，您可以添加带有精美动画的此一页滚动：http://peachananr.github.io/onepage-scroll/Demo/demo.html

您只需要将<section>包裹在div中即可。

<div class="main">
  <section></section>
  <section></section>
  <section></section>
</div>

html scroll