Disable CSS scroll snap after certain point

joshmoto
May 7, 2023
245 views
0 votes
2 Answers

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!

Tags: css snapping

Answers

Chosen as BEST ANSWER

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>

(Edit)

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>

Please signup or login to give your own answer.

Click here to cancel reply.