0

Found a solution: add new CSS property overscroll-behavior-y: none;

See overscroll-behavior property

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

Original question:

Trying to prevent overscrolling in Chrome. I tried multiple solutions, but with no help. This is my html and body used (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 */
}

One idea i've tried was this answer 7 years ago, but it makes the scroll bar of the browser go behind the fixed header and looks weird.

KP83
  • 616
  • 1
  • 10
  • 34
  • Have you cleared margin on the body? I dont see `margin: 0;` on the body. The `` tag has default margin which will be added to to the `min-height` creating height greater than 100%. – BugsArePeopleToo Sep 11 '19 at 15:27
  • Sorry forgot the * part that has margin and padding set to 0. Added gif to shows what happens. – KP83 Sep 11 '19 at 15:29
  • Your `overflow` lines should be on `body`, not on `html`. – BugsArePeopleToo Sep 11 '19 at 15:31
  • 1
    Doesn't do anything when i do that. Add ,body to html works in the same way that i explained so the scrollbar go behind the fixed header, looks strange. – KP83 Sep 11 '19 at 15:33

1 Answers1

-1

That's the default behavior of the browser if it automatically scroll back to the 0 position. Nothing to do with it.

Anoop Gupta
  • 131
  • 1
  • 5