Question

我正在制作一个使用CSS滚动捕捉（垂直和水平）的网站。滚动捕捉容器是可变的（使用vw和vh），并且每当我调整浏览器窗口（Chrome）的大小时，捕捉位置都会变得有点奇怪，垂直和水平-CodePen here。

HTML

<div class='page-container'>
  <ul class='page-content'>
    <li class='section-container'>
      <header id="home">
        <div class="section-links">Side menu</div>
        <div class='section-content'>
          <div class='content-block'>
            <div class='content'>
              <h2>Scroll down</h2>
            </div>
          </div>
        </div>
      </header>
    </li>
    <li class='section-container'>
      <section id='about' class='slideshow'>
        <ul class='section-links'>
          <li><a href='#1'>1</a></li>
          <li><a href='#2'>2</a></li>
          <li><a href='#3'>3</a></li>
          <li><a href='#4'>4</a></li>
        </ul>

        <div class='section-content'>
          <div class='content-block slide' id='about-1'>
            <div class='content'>
              <p id='1'>First horizontal snap</p>
            </div>
          </div>

         <div class='content-block slide' id='about-2'>
          <div class='content'>
           <p id='2'>Second horizontal snap</p>
          </div>
         </div>

         <div class='content-block slide' id='about-3'>
          <div class='content'>
            <p id='3'>Third horizontal snap</p>
          </div>
         </div>

         <div class='content-block slide' id='about-4'>
          <div class='content'>
            <p id='4'>Fourth horizontal snap</p>
          </div>
         </div>
        </div>
      </section>
      </li>
    </ul>
  </div>

CSS

html, body {
 padding: 0;
 margin: 0;
 height: 100vh;
 min-height: 100%;
 width: 100vw;
 max-width: 100%;
 }

.page-container {
 display: flex;
 flex-flow: row nowrap;
 height: 100vh;
 overflow: hidden;
 }

.page-content {
 width: 100%;
 height: 100vh;
 margin: 0;
 padding: 0;
 background: #1C1E26;
 overflow-y: scroll;
 scroll-behavior: smooth;
 scroll-snap-type: y mandatory;
 scroll-snap-type: mandatory;
 scroll-snap-points-y: repeat(100vh);
 }

.page-content::-webkit-scrollbar {
 visbility: hidden;
 display: none;
}

.section-container {
 scroll-snap-align: center;
}

section, header {
 display: flex;
 flex-flow: row nowrap;
 align-items: center;
 height: 100vh;
 margin: 0;
 padding: 10vh 10vw 0 10vw;
 }

.section-links {
 display: flex;
 flex-flow: column nowrap;
 justify-content: center;
 align-items: flex-end;
 position: relative;
 min-width: 15vw;
 max-width: 200px;
 height: 70vh;
 padding: 0;
 list-style-type: none;
 margin-right: 5vw;
 }

.section-links:after {
 content:'';
 display: inline-flex;
 position: absolute;
 right: -19%;
 width: 0;
 height: 70vh;
 border: .5px dotted #fff;
 }

.section-content {
 display: flex;
 position: relative;
 flex-flow: row nowrap;
 align-items: flex-start;
 justify-content: flex-start;
 height: 70vh;
 width: 55vw;
 max-width: 800px;
 overflow: auto;
 scroll-behavior: smooth;
 scroll-snap-type: x mandatory;
 }

.section-content::-webkit-scrollbar {
 visbility: hidden;
 display: none;
 }

.content-block {
 display: flex;
 flex-flow: column nowrap;
 min-width: 100%;
 height: 100%;
 scroll-snap-align: center;
 overflow-y: auto;
 overflow-x: hidden;
 padding-left: 1vw; /* For tab +/- signs*/
 }

.content {
 margin: auto 0;
 }

如果您调整码笔框架的大小或调整浏览器窗口的大小，您会明白我的意思-垂直方向，如果您收缩和拉伸浏览器窗口，则窗口将卡在两个滚动捕捉位置之间，水平时，卡住，您会看到滚动捕捉位置会缩放，释放后它也会卡在位置之间。

有什么方法（对jquery和javacsript解决方案开放）强制调整窗口位置大小后更新捕捉位置，以便它们重新捕捉到正确的位置？还是在CSS滚动捕捉更加成熟之前使用jquery插件或javascript更好？

调整窗口大小时，CSS滚动捕捉是否总是中断？

0 个答案: