CODEWITHSUNDEEP
cssgoogle-chromescroll-snap
Matthew Wilson
Matthew Wilson

Reputation: 111

Snap scroll CSS too fast/jumpy in Chrome but works fine everywhere else

Very new to this but I have a page of sections that I have a scroll snap function, but when viewed on chrome the transition isn't smooth at all, it jumps from one section to the other far too quickly. Is there any way to solve this??

https://www.matthewjameswilson.com/

This is the code I am using:

html {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-padding: 50px 0 0 0;
}

section {
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

Upvotes: 10

Views: 7832

Answers (4)

Mohamed Raza
Mohamed Raza

Reputation: 983

you have missed to add an smooth attribute scroll-behavior: smooth; on CSS

html {
 overflow-y: scroll;
 scroll-snap-type: y mandatory;
 scroll-padding-top: 50px;
 scroll-behavior: smooth;
}

section {
 height: calc(100vh - 50px);
 scroll-snap-align: start;
 scroll-snap-stop: always;
}

Upvotes: 0

Bimo Arsa
Bimo Arsa

Reputation: 1

This works for me. It scrolls when mouse wheel event (deltaY = 100 or -100) is detected. Use scrollBy to add deltaY to current position.

element.addEventListener("wheel", function (event) {
    if ((event.deltaY === 100) || (event.deltaY === -100)) {
        event.preventDefault();
        element.scrollBy({
            top: event.deltaY,
            behavior: "smooth",
        });
    }
});

Upvotes: 0

Duc Le
Duc Le

Reputation: 1

For someone still find the answer for this issue. I disabled scroll with mouse wheel and trigger a normal scroll event. Mouse wheel has weird behavior with scroll-snap CSS 

const scrollYPerView = parent.clientHeight;
parent.addEventListener('wheel', function (event) {
  event.preventDefault();
  if (event.deltaY > 0) {
    scrollDown();
  } else {
    scrollUp();
  }
});

function scrollUp() {
  let currentScrollY = parent.scrollTop;
  parent.scroll({top: currentScrollY - scrollYPerView, left: 0, behavior: 'smooth'});
}

function scrollDown() {
  let currentScrollY = parent.scrollTop;
  parent.scroll({top: currentScrollY + scrollYPerView, left: 0, behavior: 'smooth'});
}

Upvotes: 0

Pavlo Vovzhynskyy
Pavlo Vovzhynskyy

Reputation: 1

scroll-behavior: smooth;

Fixes only when scrolling by clicking an <a> tag. An issue is getting that smooth scroll when scrolling with the mouse wheel.

Upvotes: 0

Related Questions