Question

我正在尝试制作一个投资组合，这是没有内容的代码：

$(document).ready(function() {
  $('.nav-link').on('click', function() {
    if ($(window).width() < 768) {
      let section = $(".section#" + $(this).attr('id')).offset();
      let scrollTop = $('#main-container').scrollTop() + section.top
      $('#main-container').animate({
        scrollTop: scrollTop
      }, 500);
    } else {
      let section = $(".section#" + $(this).attr('id')).offset();
      let scrollLeft = $('#main-container').scrollLeft() + section.left
      console.log(scrollLeft);
      $('#main-container').animate({
        scrollLeft: scrollLeft
      }, 500);
    }
  });



  $(".container").scroll(function() {
    if ($(window).width() < 768) {
      let container = $(".container");
      let container_height = container.height();
      let pageSplit = 1 / $('.section').length

      let profile_height = container_height * pageSplit;
      let projects_height = container_height * pageSplit * 2;
      let contact_height = container_height * pageSplit * 3;
      if ($('.container').scrollTop() > contact_height + 20) {
        $('.nav-link').removeClass('active');
        $('.nav-link#contact').addClass('active');
      } else if ($('.container').scrollTop() > profile_height && $('.container').scrollTop() < contact_height + 20) {
        $('.nav-link').removeClass('active');
        $('.nav-link#projects').addClass('active');
      } else if ($('.container').scrollTop() < profile_height) {
        $('.nav-link').removeClass('active');
        $('.nav-link#profile').addClass('active');
      }
    } else {
      let container = $(".container");
      let container_width = container.width();
      let pageSplit = 1 / $('.section').length

      let profile_width = container_width * pageSplit;
      let projects_width = container_width * pageSplit * 2;
      let contact_width = container_width * pageSplit * 3;

      console.log($('.container').scrollLeft());
      console.log(projects_width);

      if ($('.container').scrollLeft() > contact_width + 20) {
        $('.nav-link').removeClass('active');
        $('.nav-link#contact').addClass('active');
      } else if ($('.container').scrollLeft() > profile_width && $('.container').scrollLeft() < contact_width + 20) {
        $('.nav-link').removeClass('active');
        $('.nav-link#projects').addClass('active');
      } else if ($('.container').scrollLeft() < profile_width) {
        $('.nav-link').removeClass('active');
        $('.nav-link#profile').addClass('active');

      }
    }
  });
});

function scrollHorizontally(e) {
  e = window.event || e;
  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
  document.getElementById('main-container').scrollLeft -= (delta * 55); // Multiplied by 40
  e.preventDefault();
}

if (document.documentElement.clientWidth >= 768) {
  if (document.getElementById('main-container').addEventListener) {
    // IE9, Chrome, Safari, Opera
    document.getElementById('main-container').addEventListener("mousewheel", scrollHorizontally, false);
    // Firefox
    document.getElementById('main-container').addEventListener("DOMMouseScroll", scrollHorizontally, false);
  } else {
    // IE 6/7/8
    document.getElementById('main-container').attachEvent("onmousewheel", scrollHorizontally);
  }
}

function scroll() {
  if (document.documentElement.clientWidth >= 768) {
    if (document.getElementById('main-container').addEventListener) {
      // IE9, Chrome, Safari, Opera
      document.getElementById('main-container').addEventListener("mousewheel", scrollHorizontally, false);
      // Firefox
      document.getElementById('main-container').addEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
      // IE 6/7/8
      document.getElementById('main-container').attachEvent("onmousewheel", scrollHorizontally);
    }
  } else {
    if (document.getElementById('main-container').removeEventListener) {
      // IE9, Chrome, Safari, Opera
      document.getElementById('main-container').removeEventListener("mousewheel", scrollHorizontally, false);
      // Firefox
      document.getElementById('main-container').removeEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
      // IE 6/7/8
      document.getElementById('main-container').detachEvent("onmousewheel", scrollHorizontally);
    }
  }
}

/* For mobile phones: */

.container {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #BEBAB7;
  overflow: auto;
  scrollbar-width: none;
  white-space: normal;
}

* {
  margin: 0;
}

html,
body {
  background-color: #BEBAB7;
  height: 100%;
  font-family: sans-serif;
  color: #77212E;
}

.container::-webkit-scrollbar {
  display: none;
}

div.section {
  display: inline-block;
  height: 100%;
  width: 100%;
}

.body {
  margin-top: 25%;
  margin-left: 25%;
  width: 40%;
  white-space: normal;
}

.section-pic {
  width: 100px;
  height: 100px;
  margin-bottom: 25px;
  border-radius: 100px;
  border: 2px solid #77212E;
}

hr {
  border-color: #77212E;
}

.github-logo {
  width: 100px;
}

.nav {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1000;
}

.nav-link {
  margin: 5px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
}

.nav-link::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #77212E;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.nav-link.active::after {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .container {
    white-space: nowrap;
    height: auto;
    min-height: 100vh;
  }
  .body {
    position: relative;
    top: 50%;
    margin: auto;
  }
  .section {
    margin-top: 0;
    height: 100vh;
  }
  .nav {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
  }
  .nav-link {
    float: left;
    margin: 5px;
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/nav.css">
</head>

<body onresize="scroll()">
  <div class="nav">
    <div class="nav-link active" id="profile">
      Profile
    </div>
    <div class="nav-link" id="projects">
      Projects
    </div>
    <div class="nav-link" id="contact">
      Contact
    </div>
  </div>

  <div class="container" id="main-container">
    <div class="section" id="profile">
      <div class="body">
        <h1 class="heading" id="profile-heading"><img src="img/content/profile-pic.jpg" alt="Profile Pic" class="section-pic" align="middle"> Profile</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel euismod lorem, in condimentum leo. Nam a magna convallis, finibus odio at, tincidunt mi. Donec non erat varius, pulvinar sapien at, rhoncus lectus.
      </div>
    </div>
    <div class="section" id="projects">
      <div class="body">
        <h1 class="heading" id="profile-heading"><img src="img/content/projects-pic.jpg" alt="Projects Pic" class="section-pic" align="middle"> Projects</h1>
        orem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel euismod lorem, in condimentum leo. Nam a magna convallis, finibus odio at, tincidunt mi. Donec non erat varius, pulvinar sapien at, rhoncus lectus. Vivamus accumsan quam at arcu accumsan
        blandit. Aliquam quis dignissim sapien, a ullamcorper risus. Phasellus accumsan neque ligula, a dapibus neque vulputate at.
      </div>
    </div>
    <div class="section" id="contact">
      <div class="body">
        <h1 class="heading" id="profile-heading"><img src="img/content/contact-pic.jpg" alt="Contact Pic" class="section-pic" align="middle"> Contact</h1>
        <form action="">
          <input type="email">
          <input type="text">
          <textarea></textarea>
        </form>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="js/main.js" defer></script>
  <script type="text/javascript" src="js/scroll.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

</html>

如果扩大和缩小结果窗口，您会看到页面从水平布局变为垂直布局（更改布局时必须单击运行才能使滚动工作，这是为什么它不起作用的原因）在jsfiddle中正确）。如您所见，如果在水平布局时滚动，则页面的每个“部分”都有不同的垂直位置。如何使垂直位置位于每个部分的页面顶部？

Answer 1

（这里是问题代码的小提琴：http://jsfiddle.net/6902zwjg/1/）

您已将display: inline-block;分配给您的部分。导致您的部分在底部对齐。如果要垂直居中，则可以使用flex。

示例：https://codepen.io/anon/pen/zQbMzR

默认情况下，浮动元素在顶部对齐。
默认情况下，内联和内嵌块元素在底部对齐。
对于垂直对齐，可以使用flex。

Answer 2

虽然可以使用Flex，但不必。

div.section {
  display: inline-block;
  height: 100%;
  width: 100%;
  vertical-align: top;
}

div的垂直定位错误

2 个答案: