Html 触摸页面顶部或底部时，滚动仅在HiDpi屏幕上卡住

我正在建立一个公文包网站，当我的滚动条碰到页面的顶部或底部时就会卡住，有时甚至更快。我认为问题与dpi更高屏幕上的像素数量有关。 我还使用了一些效果，如视差、平滑滚动、滚动捕捉、交点检测器等。 其中一个可能是问题的原因，但我无法确定。此问题仅在“带HiDpi屏幕的笔记本电脑”的视口设置中出现-在2台笔记本电脑上也已检查

切换任何其他设备的视口并刷新以查看其工作方式

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

我尝试的是：

我的

设置为180 vh，因此从“关于”部分向后滚动时，我可以有一个更好的

滚动捕捉对齐：居中位置。
尝试将其更改为100vh，这样问题就不那么严重了，滚动条只有在触摸页面的绝对顶部或底部时才会冻结，而且不一致，有时我仍然可以滚动，但如果我在im已处于顶部位置时滚动到顶部，则有时会卡住，页面底部也是如此。这也使得页面在HiDpi上的滚动速度变慢了，这很好，但我真的更喜欢我设置的180vh视差效果。
所以我尝试了98vh，看起来我不能停留在页面的顶部，但现在当触摸页面底部时很容易被卡住。
如果滚动条冻结，我可以按屏幕上的某个位置，如果我点击空格键，它将向下滚动或箭头以在整个页面上进行完全滚动控制。
现在我很确定有1个像素，如果视口“触摸”，它会冻结滚动，或者可能会改变焦点。
我已尝试将
从该组件中删除到App.jsx，但没有任何更改。
我觉得很奇怪，这个问题只发生在特定的dpi上。。这意味着这才是真正的问题。
我看到一些人谈论缩放问题，但我不确定他们的意思是什么，以及如何解决我的问题

JSX:

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

编辑：删除
滚动捕捉类型：y必填似乎解决了结巴和快速滚动的问题。当然，还有快照滚动。也许这是一个方向。
我在移动设备上没有bug，但我在与“vh”合作的项目中遇到了一些其他问题。当你使用“vh”时，当你使用某种需要键盘的公式时，手机上的页面就会表现得很奇怪。所以，在你的网站不能在手机上正常运行之前，请记住这一点。我真的很生气，需要很多时间来“修复”它

顺便说一句，视差效果不错：）
我在移动设备上没有这个bug，但我在使用“vh”进行项目时遇到了一些其他问题。当你使用“vh”时，当你使用某种需要键盘的公式时，手机上的页面就会表现得很奇怪。所以，在你的网站不能在手机上正常运行之前，请记住这一点。我真的很生气，需要很多时间来“修复”它

不错的视差效果：）
谢谢！是的，只有打开开发工具并将视口切换到“带HiDpi屏幕的笔记本电脑”时，错误才会出现。或者如果你真的用hidpi在笔记本电脑上打开它，当然了！是的，只有打开开发工具并将视口切换到“带HiDpi屏幕的笔记本电脑”时，错误才会出现。当然，如果你真的用hidpi在笔记本电脑上打开它
<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>

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;
  }
`;