Disable CSS scroll snap after certain point

Question

OK so I have 7 sections, first 4 sections are CMYK, and last 3 sections are RGB.

I am trying to stop scroll snapping on sections RGB.

If I apply scroll-snap-align: start; to CMYK sections, when I scroll to end of section .bg-key (black) it always forces me to snap back to start of .bg-key (black) as I try to scroll down...

html {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

section {
  height: 100vh;
  position: relative;
  color: white;
}

.bg-cyan {
  background: cyan;
  scroll-snap-align: start;
}

.bg-magenta {
  background: magenta;
  scroll-snap-align: start;
}

.bg-yellow {
  background: yellow;
  color: black;
  scroll-snap-align: start;
}

.bg-key {
  background: black;
  scroll-snap-align: start;
}

.bg-red {
  background: red;
}

.bg-blue {
  background: blue;
}

.bg-green {
  background: green;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"/>

<main>
  <section class="bg-cyan">CYAN</section>
  <section class="bg-magenta">MAGENTA</section>
  <section class="bg-yellow">YELLOW</section>
  <section class="bg-key">BLACK</section>
  <section class="bg-red">RED</section>
  <section class="bg-blue">BLUE</section>
  <section class="bg-green">GREEN</section>
</main>

See fiddle... https://jsfiddle.net/joshmoto/qday0r9o/4/

If I try using scroll-snap-type: none; on .bg-red section using tilde asterisk to get all elements after .bg-red, nothing happens? Every section still snaps? See here...

html {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

section {
  height: 100vh;
  position: relative;
  scroll-snap-align: start;
  color: white;
}

/* Disable scroll snapping after .bg-red section */
section.bg-red ~ * {
  scroll-snap-type: none;
}

.bg-cyan {
  background: cyan;
}

.bg-magenta {
  background: magenta;
}

.bg-yellow {
  background: yellow;
  color: black;
}

.bg-key {
  background: black;
}

.bg-red {
  background: red;
}

.bg-blue {
  background: blue;
}

.bg-green {
  background: green;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"/>

<main>
  <section class="bg-cyan">CYAN</section>
  <section class="bg-magenta">MAGENTA</section>
  <section class="bg-yellow">YELLOW</section>
  <section class="bg-key">BLACK</section>
  <section class="bg-red">RED</section>
  <section class="bg-blue">BLUE</section>
  <section class="bg-green">GREEN</section>
</main>

See fiddle... https://jsfiddle.net/joshmoto/mbey5p6s/38/

Can anyone see where I'm going wrong here...?

Would love to be able to disable css snapping after a certain point if possible?

Thanks!

Hello @joshmoto, There is a solution for this but it works only on Firefox, https://css-tricks.com/almanac/properties/s/scroll-snap-stop/ — ABDULAZIZ NOREDIN QADMOR, May 07 '23 at 01:38
Not a fix but note that the [](https://html.spec.whatwg.org/dev/embedded-content.html#the-link-element) tag does not use and does not need a closing slash and never has in any HTML specification. — Rob, May 07 '23 at 11:36
@Rob this is how stack overflow code editor adds in external css libraries — joshmoto, May 07 '23 at 17:08
Someone needs to fix that when even the W3C Validator will flag that. — Rob, May 07 '23 at 20:27
@Rob you are right, had to see for myself. It is only an info flag but still a flag none the less... [https://i.imgur.com/RMywqci.png](https://i.imgur.com/RMywqci.png) — joshmoto, May 08 '23 at 00:14

score 1 · Answer 1 · answered May 07 '23 at 02:18

When I change the "scroll-snap-type" to "both" on the html element, in your first example the black section does not snap back. But as it is, the usability is poor.

html {
  overflow-y: scroll;
  scroll-snap-type: both;
  scroll-behavior: smooth;
}

section {
  height: 100vh;
  position: relative;
  color: white;
}

.bg-cyan {
  background: cyan;
  scroll-snap-align: start;
}

.bg-magenta {
  background: magenta;
  scroll-snap-align: start;
}

.bg-yellow {
  background: yellow;
  color: black;
  scroll-snap-align: start;
}

.bg-key {
  background: black;
  scroll-snap-align: start;
}

.bg-red {
  background: red;
}

.bg-blue {
  background: blue;
}

.bg-green {
  background: green;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"/>

<main>
  <section class="bg-cyan">CYAN</section>
  <section class="bg-magenta">MAGENTA</section>
  <section class="bg-yellow">YELLOW</section>
  <section class="bg-key">BLACK</section>
  <section class="bg-red">RED</section>
  <section class="bg-blue">BLUE</section>
  <section class="bg-green">GREEN</section>
</main>

Thanks @com.on.ist, didn't see `both` option, yeah just tested it and you're right it behaves kind of weird, always likes to snap you back to original point if you don't scroll further enough, I tried `scroll-snap-type: both mandatory;` and it behaves like my original examples. But it is weird how `both` almost solves the problem but causes other unwanted behaviour. Thanks tho for checking this out for me :-) — joshmoto, May 07 '23 at 02:36

score 1 · Answer 2 · answered May 07 '23 at 02:22

I had to use jQuery in the end to do a little hack to set HTML css scroll-snap-type value to initial...

$(window).on('scroll', function() {
  if ($(window).scrollTop() > $('.bg-key').offset().top) {
    $('html').addClass('no-scroll-snap');
  } else {
    $('html').removeClass('no-scroll-snap');
  }
});

html {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

html.no-scroll-snap {
  scroll-snap-type: initial;
}

section {
  height: 100vh;
  position: relative;
  scroll-snap-align: start;
  color: white;
}

.bg-cyan {
  background: cyan;
}

.bg-magenta {
  background: magenta;
}

.bg-yellow {
  background: yellow;
  color: black;
}

.bg-key {
  background: black;
}

.bg-red {
  background: red;
}

.bg-blue {
  background: blue;
}

.bg-green {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" />

<main>
  <section class="bg-cyan">CYAN</section>
  <section class="bg-magenta">MAGENTA</section>
  <section class="bg-yellow">YELLOW</section>
  <section class="bg-key">BLACK</section>
  <section class="bg-red">RED</section>
  <section class="bg-blue">BLUE</section>
  <section class="bg-green">GREEN</section>
</main>

Disable CSS scroll snap after certain point

2 Answers2