css - 到达滚动边界时防止过度滚动

Question

找到解决方案:添加新的 CSS 属性 overscroll-behavior-y: none;

See overscroll-behavior property

html {
  margin: 0;
  overscroll-behavior-y: none;
}

---

原始问题:

试图防止 Chrome 中的过度滚动。我尝试了多种解决方案，但没有任何帮助。这是我使用的 html 和正文 (CSS):

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box; /* width and height value includes content, padding and border not the margin */
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* remove highlight on touch devices */
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -webkit-touch-callout: none; /* iOS Safari display callout information */
  -webkit-text-size-adjust: 100%; /* prevent font scaling in landscape while allowing user zoom */
  user-drag: none; 
  -webkit-user-drag: none; /* disable drag images */
}

html {
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden !important;
}

body {
  font-family: sans-serif;
  font-weight: normal;
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: 0.0125em;
  text-align: left;
  color: black;
  min-height: 100%; /* for sticky footer */
  display: flex;   /* for sticky footer */
  flex-direction: column; /* for sticky footer */
}

我试过的一个想法是这个 answer 7 years ago , 但它使浏览器的滚动条在固定标题后面，看起来很奇怪。

Answer 1

这是浏览器的默认行为，如果它自动滚动回 0 位置。与它无关。