Website double-scrolling on Chrome using scroll-snap-type

I want my sections to take the whole page and as soon as the user scrolls up or down, the previous/next section comes up. It works perfectly on Firefox and on Chromium-Edge, but when I tested it on Chrome, it always skips a section (goes from section1 to section 3 and from section 3 back to section 1). What can I do to solve this problem?

Here is the HTML:

<div class="page container">
    <div class="section section1">
       ...
    </div>

    <div class="section section1">
       ...
    </div>

    <div class="section section2">
       ...
    </div>

    <div class="section section3">
       ...
    </div>
</div>

And here is the CSS:

    .container{
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: auto;

  /*  Scroll Snap  */

  scroll-snap-type: y mandatory;
}

.section{
  position: relative;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
}

here is the website if anyone wants to see by themselves : Open in Firefox and/or Chrome to see difference

Upvotes: 9

Answers (4)

Ndubuisi Jr

Reputation: 511

This nearly broke me down :)

I simply removed the background property set on the container element and it was fixed.

Upvotes: 0

Ramesh arr

Reputation: 19

Below snippet solved the issue for me.

var canScroll = true;
    var scrollContainer = document.querySelector('html')
    scrollContainer.addEventListener('wheel', function(e) {
    if (canScroll) {
        scrollContainer.scrollBy(0, e.deltaY);
        canScroll = false;
        setTimeout(() => {
            canScroll = true;
        }, 800);
    }
    e.preventDefault();
    }, { passive: false });

html {
        height: 100%;
        scroll-snap-type: y mandatory;
          scroll-behavior: smooth;
        -ms-scroll-snap-type: mandatory;
    }

    div#section-1,div#section-2,div#section-3,div#section-4,div#section-5 {
        padding: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'LexiaLight';
        width: 100%;
    }

    div#section-1, div#section-2, div#section-3, div#section-4, div#section-5 {
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }

    div#section-1 {
        background: #264653;
    }

    div#section-2 {
        background: #2a9d8f;
    }

    div#section-3 {
        background: #e9c46a;
    }

    div#section-4 {
        background: #f4a261;
    }

    div#section-5 {
        background: #e76f51;
    }

    div#section-1, div#section-2, div#section-3, div#section-4, div#section-5{
      scroll-snap-align: start;
        scroll-snap-stop: always;
    }

<div id="section-1"></div>
<div id="section-2"></div>
<div id="section-3"></div>
<div id="section-4"></div>
<div id="section-5"></div>

Upvotes: 0

sparda

Reputation: 1

I have the same problem in Chrome and Opera on Windows (not Mac). But if I make each block of the page scrollable horizontally, the problem is solved.

As raina77ow wrote in his answer to this case, the bug fires only on wheel events. But in my case it does not depend on any background parameters.

For now I have only found a solution based on this:

html {
  scroll-snap-type: y mandatory;
}

.page {
  position: relative;
  scroll-snap-align: start;
  height: 100vh;
  overflow-x: auto;
}

.page::-webkit-scrollbar {
    display: none
}

.page::before {
  content: "";
  position: absolute;
  width: calc(100% + 1px);
  height: 1px;
}

<div class="container">
  <div class="page">
    Page 1
  </div>
  <div class="page">
    Page 2
  </div>
  <div class="page">
    Page 3
  </div>
  <div class="page">
    Page 4
  </div>
</div>

Upvotes: 0

raina77ow

Reputation: 106385

Definitely a bug in Chrome. The offender seems to be background-color (!) property set on the container element.

For some inexplicable reasons its presence triggers overscrolling... BUT only on a wheel-kind scroll. The keyboard one (either with KeyUp/Down or PageUp/Down) works fine.

Here's SRE; try scrolling the page, then press 'Fix Chrome' button, then scroll one more time - and see the difference. In Chrome 86 (Version 86.0.4240.111 (Official Build) (64-bit), to be precise), at least.

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.break-things {
  background-color: #f3f3f3;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

.item {
  scroll-snap-align: start;
  font-size: 7rem;
  height: 77vh; 
}

.item1 {
  background-color: blue;
}

.item2 {
  background-color: yellow;
}

.item3 {
  background-color: red;
}

<body>
  <header><button type=button>FIX CHROME SCROLL SNAP</button></header>
  <div class="container break-things">
    <div class="item item1">Hello World</div>
    <div class="item item2">Hello World</div>
    <div class="item item3">Hello World</div>
  </div>
  <script>
   let isChromeBroken = true;
   document.querySelector('button').onclick = (ev) => {
     isChromeBroken = !isChromeBroken;
     ev.target.textContent = `${isChromeBroken ? 'FIX' : 'BREAK'} CHROME SCROLL SNAP`;
     document.querySelector('.container').classList.toggle('break-things');   
   }
  </script>
</body>

Upvotes: 6

Website double-scrolling on Chrome using scroll-snap-type

Answers (4)

Related Questions