Question

正如标题所示，由于Web页面上的“信息”模式，我确定CSS滚动捕捉不起作用。我已经尽力修复了所有问题，但是在此CSS功能方面不是专家。有人有想法么？我将在下面发布基本代码，但这也是完整项目的链接：http://jacobtruax.info/work.html#

模式容器和滚动容器的CSS

section.info-page {
  z-index: 2;
  position: fixed;
  top: -100vh;
  left: 0;
  display: flex;
  margin-top: 100px;
  margin-left: 40px;
  margin-right: 40px;
  width: 100vw;
  min-height: 100vh;
  max-width: 100vw;

  transition: top 0.5s;
}

section.info-page.open {
top: 0;
}

div.container {
  top: 0;
  left: 0;
  min-width: 100vw;
  min-height: 100vh;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

div.work-info {
  width: 13vw;
  top: 0;
  left: 0;
  height: 100vh;
  position: fixed;
  padding-right: 80px;
  display: flex;
  align-items: center;
  margin-left: 40px;
}

section.work-page {
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;

}

HTML

<body>

  <section class="info-page">
    <div class="about">
    <h1>
        Art director, graphic designer, and front-end developer - working mostly in digital development and editorial design.
        <br><br>
        Co-founder of fn-up Magazine.
    </h1>
  </div>

  <div class="education">
    <h2>
        Education:
    </h2>
    <p>
        Bachelors of Communication Design from Paris College of Art
    </p>
    <h2>
        Features:
    </h2>
    <p>
        <a href="http://brutalistwebsites.com/">Brutalist Websites x 2</a><br>
        <a href="http://klikkentheke.com/websites/jacob-truax/">Klikkentheke</a><br>

    </p>
  </div>

  <div class="address">
    <h2>
        Contact:
    </h2>
    <p>
        <a href="mailto:jtruax303@gmail.com">jtruax303@gmail.com</a><br><br>
        + 1 (720) 883-4040<br><br>
        26 rue Piat<br>
        Paris France<br>
        75020
    </p>
    <h2>
        Currently:
    </h2>
    <p>
        Available for freelance
    </p>
  </div>
</section>

<div id="barba-wrapper">
  <div class="barba-container" data-namespace="single-news">
  <header>
  <a class="home no-barba" href="index.html">Jacob Truax</a>
  <a class="contact" href="#">Info</a>
  <a class="work" href="work.html">Work</a>
  </header>
  <div class="work-info">
    <ul>
      <li id="p01" data-number="FN-UP Magazine"><a href="#">01</a></li>

      <li id="p02" data-number="Cameron Tidball-Sciullo"><a href="#">02</a></li>

      <li id="p03" data-number="Jacob Truax"><a href="#">03</a></li>

      <li id="p04" data-number="Alexander Romero"><a href="#">04</a></li>
    </ul>
  </div>

<div class="container">
  <section class="work-page fn-up" data-client="FN-UP Magazine" data-seen-1="yes">
    <div class="content">
      <img src="lib/fn-up.png">
    </div>
  </section>

  <section class="work-page cameron" data-client="Cameron Tidball-Sciullo" data-seen-2="yes">
    <div class="content">
      <img src="lib/alex.png">
    </div>
  </section>

  <section class="work-page truax" data-client="Jacob Truax" data-seen-3="yes">
    <div class="content">
      <img src="lib/old.png">
    </div>
  </section>

  <section class="work-page romero" data-client="Alexander Romero" data-seen-4="yes">
    <div class="content">
      <img src="lib/alex.png">
    </div>
  </section>
</div>

  <footer class="footer">
    <h2 class="about">FN-UP Magazine</h2>
  </footer>

</div>
</div>
</body>

<script src="info.js"></script>
<script src="work.js"></script>

CSS Scroll Snap无法与隐藏模式一起使用

0 个答案: