Question

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

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位置，这就是浏览器的默认行为。与它无关。

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

1 个答案: