如何创建一个向下跳跃的滚动条，以增加视口的大小 [英] How to create a scroll that jumps down in increments the size of your viewport

查看：40
本文介绍了如何创建一个向下跳跃的滚动条，以增加视口的大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用 html 和 css 编写一个非常基本的网站.每次滚动时，我都希望它滚动窗口的整个长度并出现一个新段落(居中).我画了一张图来表达这个想法.这是我到目前为止想出的代码，但我遇到了空白.我几乎没有打开过我的文本编辑器.......2 年，这是我的第一个项目.我需要帮助.

即使你能给我语言，这样我就可以更好地找到关于如何实现我想要实现的目标的教程......那也太棒了.:) 谢谢

现在我的居中文本已修复，我知道这是一个问题.

html {边距:0；填充:0；高度:100vh；宽度:100%；}文章 {宽度:42.5%；保证金:自动；}p{字体大小:12pt；字体系列:Times New Roman；}一种 {文字装饰:无；}.内容 {位置:固定；顶部:50%；左:50%；变换:翻译(-50%，-50%)；}.menu a {显示:块；颜色:#000000；}.menu a:悬停{文字装饰:下划线；颜色:#000000；}.菜单 {浮动:对；清除:左；文本对齐:右；}

<头><meta charset="utf-8"><title>hellomynameischristian</title><link rel="stylesheet" type="text/css" href="../css/hellomynameischristian.css"><身体><div class="菜单"><a href="../html/hellomynameischristian.html">主页</a><a href="https://www.behance.net/christianmorgan2">设计作品集</a><a href="https://www.instagram.com/christian.m.morgan/">在ig上关注我</a>

<div class="内容"><p>居中文本.</p>

</html>

所需网页布局的草图

解决方案

根据你的草图我添加了:

  • 一个包含菜单元素的导航容器，它将具有 position: fixed、top: 20px 和 right: 20px，使用适合您需求的价值观.还有 display: flex 所以项目显示为行.请记住，这些值被添加到

      标签，而不是

    希望这能让你更清楚一点，使用 flexbox，他是你的新朋友.

    这是一个片段:

    * {边距:0；填充:0；列表样式:无；}.第1部分 {显示:弹性；弹性方向:列；对齐内容:居中；对齐项目:居中；高度:100vh；宽度:100%；背景色:#2980b9；}.菜单 {显示:弹性；位置:固定；顶部:20px；右:20px；}.menu li {左边距:10px；}.第2部分 {显示:弹性；对齐内容:居中；对齐项目:居中；高度:100vh；宽度:100%；背景颜色:#2c3e50；}.part3 {显示:弹性；对齐内容:居中；对齐项目:居中；高度:100vh；宽度:100%；背景色:#16a085；}
</nav><section class="part1"><p>我居中</p></节><section class="part2"><p>我居中</p></节><section class="part3"><p>我居中</p></section>

之后，您可以添加带有漂亮动画的单页滚动:http://peachananr.github.io/onepage-scroll/Demo/demo.html

您只需要将

包装在一个 div 中.

<节></节><节></节><节></节>

I am trying to code an extremely basic website with html and css. Every time you scroll I want it to scroll the entire length of the window and a new paragraph (centered) to appear. I drew a picture to get the idea across. This is the code I've come up with so far and I'm hitting blanks. I haven't opened my text editor for almost....2 years and this my first project since. I need help.

Even if you could give me language so I can better find tutorials on how to achieve what I am trying to achieve...that would be awesome. :) Thnx

Right now my centered text is fixed, which I know is a problem.

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

解决方案

Based on your sketch I added:

  • A navigation container which menu elements, which will have position: fixed, top: 20px and right: 20px, use the values which fit your needs. Also display: flex so the items are displayed as row. Keep in mind that the values are added to the <ul> tag, and not <nav>.

  • Three div containers with text content. Each div has display: flex, justify-content: center and align-items: center, which will center the child elements horizontally and vertically to the center.

  • Each div container will have width: 100% and height: 100vh, so remove the height and width value you added to the HTML in your css styling.

Hope this clears a bit more your situation, use flexbox, he's your new friends.

And here is a snippet:

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

After that, you can add this one-page scroll with a nice animation: http://peachananr.github.io/onepage-scroll/Demo/demo.html

You would only have to wrap your <section>'s in a div.

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

这篇关于如何创建一个向下跳跃的滚动条，以增加视口的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆