html - 触摸页面顶部或底部时滚动仅卡在 HiDpi 屏幕上

Question

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

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

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

我尝试了什么:

我的 <ParallaxWrapper>设置为 180 vh 所以我可以有更好的 scroll-snap-align: center从“关于”部分向上滚动时的位置。尝试将其更改为 100vh 并且它使问题不那么严重，滚动条仅在触摸页面的绝对顶部或底部时卡住，并且它不一致，有时我仍然可以滚动，但如果我滚动顶部时我已经在顶部位置有时会卡住，页面底部也是如此。它还使 HiDpi 上的页面滚动速度变慢，这很好，但我真的更喜欢我设置的视差效果的 180vh 设置。所以我试了98vh，好像不能卡在页面顶部，但是现在触摸页面底部时很容易卡住。如果滚动条卡住，我可以在屏幕上的某个地方按下，如果我按下空格键，它将向下滚动或箭头以在整个页面上进行完全滚动控制。现在我很确定有 1 个像素，如果视口(viewport)“触摸”它会卡住滚动或者焦点可能会改变。我试图删除 <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;
  }
`;

我发现了一些奇怪的互动:- 一次滚动“勾选”足以卡住滚动条。- 如果你滚动得足够快，越过视差部分，其他部分都很好，直到你到达底部，它也被卡住了。- 与其他视口(viewport)相比，页面通常滚动得太快。

编辑:删除scroll-snap-type: y mandatory;来自 parent 的似乎解决了卡住和快速滚动的问题。但当然，还有快照滚动。也许这是一个方向..

Answer 1

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

顺便说一句，不错的视差效果:)