CODEWITHSUNDEEP
cssgoogle-chromescroll-snap-points
Alvaro
Alvaro

Reputation: 41595

CSS scroll-snaps overflows body when reaching top

I'm having a pretty weird issue. Perhaps a bug in the scroll-snaps behaviour?

When I reach the top of the page and I keep scrolling up, then the body overflows and stays there if I do not scroll down again. Even when I reload the page.

Taking place only in Chrome for Mac (Version 75.0.3770.100 (Official Build) (64-bit)) I've tested it in Safari and Firefox and both seems to behave normally.

Reproduction online

Jsfiddle here but you can't reproduce it there. Probably because its inside an iframe?

Video of the issue:

enter image description here

Upvotes: 5

Views: 3059

Answers (4)

Athanasios Babasidis
Athanasios Babasidis

Reputation: 262

You need to add overscroll behavior. This controls if you can scroll below or above content of a site. Often used for sites with 'pull to refresh'. Read more here: https://developers.google.com/web/updates/2017/11/overscroll-behavior. 

scroll-snap-type: y mandatory;    
overscroll-behavior-y: none;

Upvotes: 5

codeuix
codeuix

Reputation: 1406

Just two more line css you have to add to fix your problem. Make height to 100% to 100vh and give box-sizing:border-box; this will fix your padding property 100%width and height; box-sizing:border-box;. Why I use vh A percentage of the full viewport height. 10vh will resolve to 10% of the current viewport height and this will give you more responsive things. But if you want use 100% this will also work fine with box-sizing:border-box;

 html,body,#container, .section, .slide{
        height: 100vh;
        box-sizing:border-box;
 }

Here is your solution code

html,body,#container, .section, .slide{
            height: 100%;
            box-sizing:border-box;
     }

Upvotes: 0

Carlos Giralt
Carlos Giralt

Reputation: 66

Maybe, you should try replacing:

body{
  -ms-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory;
}

By this one:

#container {
  -ms-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

I left you another example down here:

body {
  height: 100vh;
  margin: 0;  
}

.container {
  -ms-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100%;
}

.container div {
  scroll-snap-align: start;

  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
}

.container div:nth-child(1) {
  background: yellow;
  color: black;
}

.container div:nth-child(2) {
  background: red;
  color: white;
}

.container div:nth-child(3) {
  background: blue;
  color: white;
}

.container div:nth-child(4) {
  background: green;
  color: white;
}
<div class="container">
  <div>Section 1</div>
  <div>Section 2</div>
  <div>Section 3</div>
  <div>Section 4</div>
</div>

Upvotes: 0

Salix
Salix

Reputation: 1384

Well I looked for similar problems and solutions, after fixing your use of snap-scrolling, could be adding this:

html{
    height: 100%;
    overflow: hidden;
}
body{
    height: 100%;
    overflow: auto;
}

In some case, it apperently isn't enough, so you can also add :

body{
    overscroll-behavior: none;
}

Upvotes: 7

Related Questions