1

我正在建立一个投资组合网站，当它触及页面的顶部或底部时，我的滚动条会卡住，有时甚至更快。我认为这个问题与更高 dpi 屏幕上的像素数量有关。我还使用了一些效果，如视差、平滑滚动、滚动捕捉、交叉点检测器等。其中一个可能是问题的原因，但我无法解决。此问题仅发生在“带有 HiDpi 屏幕的笔记本电脑”的视口设置上 - 也在 2 台笔记本电脑上进行了检查。

https://jordansportfolio.netlify.com/ 切换任何其他设备的视口并刷新以查看它应该如何工作。

我认为这个问题与更高 dpi 屏幕上的像素数量有关，我还使用了一些效果，如视差、平滑滚动、滚动捕捉、交叉点检测器等。其中一个可能是问题的原因，但我无法解决。

我尝试了什么：

我<ParallaxWrapper>的设置为 180 vh 所以我可以有更好的scroll-snap-align: center从“关于”部分向上滚动时的位置。尝试将其更改为 100vh 并且它使问题不那么严重，滚动条仅在触摸页面的绝对顶部或底部时冻结，并且不一致，有时我仍然能够滚动，但如果我滚动顶部时我已经在顶部位置它有时会卡住，页面底部也是如此。它还使 HiDpi 上的页面滚动速度变慢，这很好，但我真的更喜欢 180vh 设置来实现我设置的视差效果。所以我尝试了98vh，似乎我无法卡在页面顶部，但现在触摸页面底部时很容易卡住。如果滚动条冻结，我可以按屏幕某处，如果我按空格键，它将向下滚动或箭头以在整个页面上进行完全滚动控制。现在我' 我很确定有 1 个像素，如果视口“触摸”它会冻结滚动或者焦点可能会改变。我试图删除<Heightener>从这个组件到 App.jsx，没有任何改变。我觉得这个问题只发生在特定的 dpi 上很奇怪。这意味着这是真正的问题。我看到有些人谈论扩展问题，但我不确定他们的意思以及如何解决我的问题。

JSX：

<ParallaxWrapper>
  <Logo image={ForText}>JORDAN'S</Logo>
  <Popup>PORTFOLIO</Popup>
  <PrlxLayerF image={Mountain6} />
  <PrlxLayerE image={Mountain5} />
  <PrlxLayerD image={Mountain4} />
  <PrlxLayerC image={Mountain3} />
  <PrlxLayerB image={Mountain2} />
  <PrlxLayerA image={Mountain1}>
    <Heightener>Code. Meets. Art.</Heightener>
  </PrlxLayerA>
</ParallaxWrapper>

CSS：

const ParallaxWrapper = styled.div`
  height: 180vh;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  scroll-snap-type: mandatory;
  /* position: relative; */ /* NOTE! IF IN POSITION RELATIVE - PUSHES THE PAGE UP */
  @media (max-width: 713px) {
    scroll-snap-align: end;
    height: 140vh;
  }
`;

const Logo = styled.div`
  position: absolute;
  /* same as layers height to hide the logo */
  height: 105%;
  width: 100%;
  z-index: -1;
  display: flexbox;
  align-items: center;
  justify-content: center;
  font-size: 10rem;
  font-family: "Nova Square", sans-serif;
  font-weight: 900;

  background: center / cover no-repeat url(${({ image }) => image});

  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  /* smaller then: */
  @media (max-width: 979px) {
    font-size: 8rem;
  }
  @media (max-width: 767px) {
    font-size: 6rem;
  }
  @media (max-width: 480px) {
    font-size: 3.7rem;
  }
  @media (max-width: 360px) {
    font-size: 3rem;
  }
`;

const PrlxLayerF = styled.div`
  height: 105%;
  width: 100%;
  position: absolute;
  transform-origin: 0 0;
  transform: translateZ(-5.5px) scale(6.5);
  z-index: -7;

  background: center/cover no-repeat url(${({ image }) => image});
`;

const Popup = styled(PrlxLayerF)`
  font-size: 4.4rem;
  transform: translateZ(-0.1px) scale(1.1);
  z-index: -3;
  background: none;
  text-align: center;
  line-height: 100vh;
  top: 10%;
  font-family: "Advent Pro", "Poiret One";
  font-weight: 600;

  /* bigger than widescreens */
  @media (min-width: 2500px) {
    top: 9%;
  }
  /* smaller than: */
  @media (max-width: 979px) {
    font-size: 4rem;
    top: 8%;
  }
  @media (max-width: 767px) {
    font-size: 4rem;
    top: 9%;
  }
  @media (max-width: 480px) {
    font-size: 3rem;
    top: 7%;
  }
  @media (max-width: 360px) {
    font-size: 2.5rem;
  }
`;

const PrlxLayerE = styled(PrlxLayerF)`
  background-image: url(${({ image }) => image});
  transform: translateZ(-4.5px) scale(5.5);
  z-index: -6;
`;

const PrlxLayerD = styled(PrlxLayerF)`
  background-image: url(${({ image }) => image});
  transform: translateZ(-3.5px) scale(4.5);
  z-index: -5;
`;

const PrlxLayerC = styled(PrlxLayerF)`
  background-image: url(${({ image }) => image});
  transform: translateZ(-2.5px) scale(3.5);
  z-index: -4;
`;

const PrlxLayerB = styled(PrlxLayerF)`
  background-image: url(${({ image }) => image});
  transform: translateZ(-1.5px) scale(2.5);
  z-index: -3;
`;

const PrlxLayerA = styled(PrlxLayerF)`
  background-image: url(${({ image }) => image});
  transform: translateZ(-0.5px) scale(1.5);
  z-index: -2;

  ::before {
    content: "";
    top: 85%;
    height: 15%;
    width: 100%;
    position: absolute;
    /* display: block; */
    z-index: 1;

    background: rgb(255, 255, 255);
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.95) 10%,
      rgba(255, 255, 255, 0.85) 15%,
      rgba(255, 255, 255, 0.738) 19%,
      rgba(255, 255, 255, 0.541) 34%,
      rgba(255, 255, 255, 0.382) 47%,
      rgba(255, 255, 255, 0.278) 56%,
      rgba(255, 255, 255, 0.194) 65%,
      rgba(255, 255, 255, 0.126) 73%,
      rgba(255, 255, 255, 0.075) 80.2%,
      rgba(255, 255, 255, 0.042) 86.1%,
      rgba(255, 255, 255, 0.021) 91%,
      rgba(255, 255, 255, 0.008) 95.2%,
      rgba(255, 255, 255, 0.002) 98.2%,
      rgba(255, 255, 255, 0) 100%
    );
  }
`;

const Heightener = styled.div`
  /* this height hides the parallax slow moving layers */
  height: 50%;
  width: 100%;
  background: white;
  position: relative;
  top: 100%;

  display: flexbox;
  justify-content: center;

  padding-top: 3%;
  font-family: "Nova Square";
  font-size: 8rem;

  @media (max-width: 1160px) {
    padding-top: 6%;
    font-size: 6rem;
  }
  @media (max-width: 979px) {
    font-size: 5rem;
  }
  @media (max-width: 713px) {
    font-size: 3.4rem;
  }
  @media (max-width: 480px) {
    font-size: 2.5rem;
  }
  @media (max-width: 360px) {
    font-size: 2rem;
  }
`;

我发现了一些奇怪的交互： - 一个滚动“滴答”就足以冻结滚动条。- 如果你滚动的速度足够快，越过视差部分，其他部分就可以了，直到你到达底部也卡住了。- 与其他视口相比，页面通常滚动得太快。

编辑：scroll-snap-type: y mandatory;从父级移除似乎解决了卡住和快速滚动的问题。但当然，也可以快速滚动。也许这是一个方向..

4

1 回答 1

0

我在移动设备上没有这个错误，但我遇到了一些其他问题，而我正在使用“vh”进行项目。当您使用“vh”时，只要您使用某种需要键盘的公式，页面在移动设备上的行为就会非常奇怪。因此，在您的网站无法在移动设备上正常运行之前，请记住这一点。我真的很生气，需要很多时间来“修复”它。

顺便说一句，很好的视差效果:)

于 2019-12-10T15:35:26.060 回答