Question

在Safari（Mac）上，存在滚动窗口时项目跳跃的问题。这导致在最后一个位置固定元素和下一个法线元素之间。

这在Chrome，Firefox上有效，但在Safari上无效。这是CodePen的链接，或者我的代码可以在底部找到：

在此示例中，问题出现在“项目4”和“关于我们的脚”之间。在Safari上应该更加流畅。

HTML：

<section class="module module-about-us">
  <div class="container module__container">
    <div class="module__inner">
      <div class="module__grid about__item animation">
        <div class="about__item-inner">
            <h1>Item 1</h1>
        </div>
      </div>
      <div class="module__grid about__item animation">
        <div class="about__item-inner">
            <h1>Item 2</h1>
        </div>
      </div>
      <div class="module__grid about__item animation">
        <div class="about__item-inner">
            <h1>Item 3</h1>
        </div>
      </div>
      <div class="module__grid about__item animation">
        <div class="about__item-inner">
            <h1>Item 4</h1>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="module blocks module-footer-about-us">
  <div class="container module__container">
    <div class="module__inner">
      <div class="row module__grid">
        <div class="col-12">
            <h3>Footer about us</h3>
        </div>
      </div>
    </div>
  </div>
</section>

<footer class="footer">
    <div class="footer__wrapper">
        <div class="container module__container">
            <div class="footer__copyright">
                <p>© 2019 All rights reserved.</p>
            </div>
        </div>
    </div>
</footer>

CSS：

.module {
  position: relative;
  overflow: hidden;
  padding: 70px 0;
}

.module-about-us {
  padding: 0;

  .about__item {
    height: 100vh;

    &.visible {
      z-index: 10;
    }

    .about__item-inner {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
  }
}

.module-footer-about-us {
  padding: 170px 0;
  background: blue;
  color: white;
}

footer {
  height: 300px;
  background: yellow;
}

JS：

aboutUsAnimation();

function aboutUsAnimation() {
  animateSection();
  $(window).on("scroll", animateSection);
}

function animateSection() {
  var scrollTop = $(window).scrollTop(),
    windowHeight = $(window).height(),
    sectionsAvailable = $(".animation");

  sectionsAvailable.each(function(i) {
    var actualBlock = $(this),
      offset = scrollTop - actualBlock.offset().top;

    //according to animation type and window scroll, define animation parameters
    var animationValues = setSectionAnimation(offset, windowHeight, i);
    console.log( actualBlock.children("div"));

    transformSection(
      actualBlock.children("div"),
      animationValues[0],
      animationValues[1],
      animationValues[2],
      animationValues[3],
      animationValues[4]
    );

    offset >= 0 && offset < windowHeight
      ? actualBlock.addClass("visible")
      : actualBlock.removeClass("visible");
  });
}

function setSectionAnimation(sectionOffset, windowHeight, elementNumber) {
  // select section animation - normal scroll
  var scale = 1,
    translateY = 100,
    rotateX = "0deg",
    opacity = 1,
    boxShadowBlur = 0;

  if (sectionOffset >= -windowHeight && sectionOffset <= 0) {
    scale = 1;
    translateY = 0;

    if (sectionOffset >= -windowHeight && sectionOffset < -0.9 * windowHeight) {
      translateY = -sectionOffset * 100 / windowHeight;
    } else if (
      sectionOffset >= -0.9 * windowHeight &&
      sectionOffset < -0.1 * windowHeight
    ) {
      translateY =
        -(9 / 8) * (sectionOffset + 0.1 * windowHeight) * 100 / windowHeight;
    } else {
      translateY = 0;
    }
  } else if (sectionOffset > 0 && sectionOffset <= windowHeight) {
    //section leaving the viewport - still has the '.visible' class

    translateY = -sectionOffset * 100 / windowHeight;
  } else if (sectionOffset < -windowHeight) {
    //section not yet visible

    translateY = 100;
  } else {
    //section not visible anymore
    translateY = -100;
  }

  return [translateY, scale, rotateX, opacity, boxShadowBlur];
}

function transformSection(
  element,
  translateY,
  scaleValue,
  rotateXValue,
  opacityValue,
  boxShadow
) {
  //transform sections - normal scroll
  element.velocity(
    {
      translateY: translateY + "vh",
      scale: scaleValue,
      rotateX: rotateXValue,
      opacity: opacityValue,
      boxShadowBlur: boxShadow + "px",
      translateZ: 0
    },
    0
  );
}

Safari-固定位置时跳转项目滚动动画

0 个答案: