0

我有一个使用100vh滚动块的简单页面，我想“捕捉”到下一个块。

这适用scroll-snap于 Chrome 和 Safari（OS Mac），但不适用于 Firefox。在 Firefox 中，页面滚动但突然停止——停止/启动也是如此。目前不确定 Edge/IE11（未经测试）。

示例包含在我当前的标记/CSS 的帖子中。

不确定出了什么问题，或者这是否是 Firefox 的常见问题 - 或者我需要一个 polyfill 或 JS 解决方案来更健壮？希望得到一些帮助，希望这不是一个大问题 - 谢谢！

/**
 * Base.
 */
 
::-moz-selection {
    background-color: black;
    color: white;
}

::selection {
    background-color: black;
    color: white;
}
 
html {
    background: white;
    font-size: 62.5%;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: $white;
    -webkit-text-size-adjust: 100%;
}

body {
    animation: fadein .24s .72s forwards;
    background-color: transparent;
    color: black;
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    height: 100vh;
    line-height: 1.2;
    opacity: 0;
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
}


/**
 * Elements.
 */

img {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
}

p {
    margin: 0 auto;
    padding: 0;
    max-width: 1200px;
}

a,
a:visited {
    background-image: linear-gradient(to right, black 33.33333%, transparent 33.33333% 66.66666%, black 66.66666%);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: 300% 8%;
    color: black;
    padding-bottom: 4px;
    text-decoration: none;
}

a:focus,
a:hover {
    background-position: left bottom;
    color: black;
    text-decoration: none;
    transition: background-position .4s ease-in;
}


/**
 * Sections.
 */

.page {
    height: 100vh;
}

.shopify-section {
    display: flex;
    flex-flow: column nowrap;
    height: 100vh;
    overflow: auto;
    scroll-snap-type: y mandatory;
}

.section {
    background: white;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding: 24px;
    scroll-snap-align: start;
}


/**
 * Mouse Scroll.
 */

.mouse {
    background: white;
    border: 3px solid black;
    border-radius: 16px;
    height: 40px;
    margin-left: -12px;
    position: absolute;
    bottom: 24px;
    left: 50%;
    overflow: hidden;
    width: 24px;
    z-index: 0;
    
}
.mouse:before { /* Dot */
    animation: scroll .8s cubic-bezier(.7,0,.3,1) infinite alternate;
    background: black;
    border-radius: 100%;
    content: "";
    height: 4px;
    margin-left: -2px;
    position: absolute;
    top: 8px;
    left: 50%;
    width: 4px;
    z-index: 2;
}

.mouse:after { /* Shadow */
    animation: scroll .8s cubic-bezier(.7,0,.3,1) infinite alternate;
    animation-delay: 80ms;
    background: #ccc;
    border-radius: 4px;
    content: "";
    height: 4px;
    margin-left: -2px;
    position: absolute;
    top: 8px;
    left: 50%;
    width: 4px;
    z-index: 1;
}


/**
 * Media Queries.
 */

@media only screen and (min-width: 800px) {
    
    body {
        font-size: 3.6rem;
    }
}


/**
 * Animations.
 */

@keyframes fadein {
    0%      { opacity: 0; }
    100%    { opacity: 1; }
}

@keyframes scroll {
    0%      { transform:translateY(0); }
    100%    { transform:translateY(14px); }
}
<div class="mouse"></div>

    <div class="page">
      <div class="shopify-section">
        
      <div class="section">
          <p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      
      <div class="section">
          <p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      
      <div class="section">
          <p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      
      </div>
    </div>

4

0 回答 0