在特定点之后禁用CSS滚动捕捉。

huangapple
go评论91阅读模式
英文:

Disable CSS scroll snap after certain point

问题

OK, 所以我有7个部分，前4个部分是CMYK，最后3个部分是RGB。

我正在尝试停止在RGB部分上进行滚动捕捉。

如果我将scroll-snap-align: start;应用于CMYK部分，当我滚动到.bg-key（黑色）部分的末尾时，它总是强制我回到.bg-key（黑色）的开头，当我尝试向下滚动时...

如果我尝试在.bg-red部分使用scroll-snap-type: none;，使用波浪号和星号来获取.bg-red之后的所有元素，什么都不会发生？每个部分仍然会捕捉？请看这里...

有人能看出我在哪里出错了吗...？

如果可能的话，我希望能够在某一点之后禁用CSS捕捉。谢谢！

英文:

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...

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. html {
  2.   overflow-y: scroll;
  3.   scroll-snap-type: y mandatory;
  4.   scroll-behavior: smooth;
  5. }
  7. section {
  8.   height: 100vh;
  9.   position: relative;
  10.   color: white;
  11. }
  13. .bg-cyan {
  14.   background: cyan;
  15.   scroll-snap-align: start;
  16. }
  18. .bg-magenta {
  19.   background: magenta;
  20.   scroll-snap-align: start;
  21. }
  23. .bg-yellow {
  24.   background: yellow;
  25.   color: black;
  26.   scroll-snap-align: start;
  27. }
  29. .bg-key {
  30.   background: black;
  31.   scroll-snap-align: start;
  32. }
  34. .bg-red {
  35.   background: red;
  36. }
  38. .bg-blue {
  39.   background: blue;
  40. }
  42. .bg-green {
  43.   background: green;
  44. }

<!-- language: lang-html -->

  1. &lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
  3. &lt;main&gt;
  4.   &lt;section class=&quot;bg-cyan&quot;&gt;CYAN&lt;/section&gt;
  5.   &lt;section class=&quot;bg-magenta&quot;&gt;MAGENTA&lt;/section&gt;
  6.   &lt;section class=&quot;bg-yellow&quot;&gt;YELLOW&lt;/section&gt;
  7.   &lt;section class=&quot;bg-key&quot;&gt;BLACK&lt;/section&gt;
  8.   &lt;section class=&quot;bg-red&quot;&gt;RED&lt;/section&gt;
  9.   &lt;section class=&quot;bg-blue&quot;&gt;BLUE&lt;/section&gt;
  10.   &lt;section class=&quot;bg-green&quot;&gt;GREEN&lt;/section&gt;
  11. &lt;/main&gt;

<!-- end snippet -->

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

<br/>

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...

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. html {
  2.   overflow-y: scroll;
  3.   scroll-snap-type: y mandatory;
  4.   scroll-behavior: smooth;
  5. }
  7. section {
  8.   height: 100vh;
  9.   position: relative;
  10.   scroll-snap-align: start;
  11.   color: white;
  12. }
  14. /* Disable scroll snapping after .bg-red section */
  15. section.bg-red ~ * {
  16.   scroll-snap-type: none;
  17. }
  19. .bg-cyan {
  20.   background: cyan;
  21. }
  23. .bg-magenta {
  24.   background: magenta;
  25. }
  27. .bg-yellow {
  28.   background: yellow;
  29.   color: black;
  30. }
  32. .bg-key {
  33.   background: black;
  34. }
  36. .bg-red {
  37.   background: red;
  38. }
  40. .bg-blue {
  41.   background: blue;
  42. }
  44. .bg-green {
  45.   background: green;
  46. }

<!-- language: lang-html -->

  1. &lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
  3. &lt;main&gt;
  4.   &lt;section class=&quot;bg-cyan&quot;&gt;CYAN&lt;/section&gt;
  5.   &lt;section class=&quot;bg-magenta&quot;&gt;MAGENTA&lt;/section&gt;
  6.   &lt;section class=&quot;bg-yellow&quot;&gt;YELLOW&lt;/section&gt;
  7.   &lt;section class=&quot;bg-key&quot;&gt;BLACK&lt;/section&gt;
  8.   &lt;section class=&quot;bg-red&quot;&gt;RED&lt;/section&gt;
  9.   &lt;section class=&quot;bg-blue&quot;&gt;BLUE&lt;/section&gt;
  10.   &lt;section class=&quot;bg-green&quot;&gt;GREEN&lt;/section&gt;
  11. &lt;/main&gt;

<!-- end snippet -->

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

<br/>

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!

答案1

得分: 1

当我将HTML元素中的 "scroll-snap-type" 更改为 "both" 时，在您的第一个示例中，黑色部分不会回弹。但目前的情况下，可用性很差。

英文:

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.

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

  1. html {
  2.   overflow-y: scroll;
  3.   scroll-snap-type: both;
  4.   scroll-behavior: smooth;
  5. }
  7. section {
  8.   height: 100vh;
  9.   position: relative;
  10.   color: white;
  11. }
  13. .bg-cyan {
  14.   background: cyan;
  15.   scroll-snap-align: start;
  16. }
  18. .bg-magenta {
  19.   background: magenta;
  20.   scroll-snap-align: start;
  21. }
  23. .bg-yellow {
  24.   background: yellow;
  25.   color: black;
  26.   scroll-snap-align: start;
  27. }
  29. .bg-key {
  30.   background: black;
  31.   scroll-snap-align: start;
  32. }
  34. .bg-red {
  35.   background: red;
  36. }
  38. .bg-blue {
  39.   background: blue;
  40. }
  42. .bg-green {
  43.   background: green;
  44. }

<!-- language: lang-html -->

  1. &lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
  3. &lt;main&gt;
  4.   &lt;section class=&quot;bg-cyan&quot;&gt;CYAN&lt;/section&gt;
  5.   &lt;section class=&quot;bg-magenta&quot;&gt;MAGENTA&lt;/section&gt;
  6.   &lt;section class=&quot;bg-yellow&quot;&gt;YELLOW&lt;/section&gt;
  7.   &lt;section class=&quot;bg-key&quot;&gt;BLACK&lt;/section&gt;
  8.   &lt;section class=&quot;bg-red&quot;&gt;RED&lt;/section&gt;
  9.   &lt;section class=&quot;bg-blue&quot;&gt;BLUE&lt;/section&gt;
  10.   &lt;section class=&quot;bg-green&quot;&gt;GREEN&lt;/section&gt;
  11. &lt;/main&gt;

<!-- end snippet -->

答案2

得分: 1

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

  1. $(window).on('scroll', function() {
  2.   if ($(window).scrollTop() > $('.bg-key').offset().top) {
  3.     $('html').addClass('no-scroll-snap');
  4.   } else {
  5.     $('html').removeClass('no-scroll-snap');
  6.   }
  7. });
  1. html {
  2.   overflow-y: scroll;
  3.   scroll-snap-type: y mandatory;
  4.   scroll-behavior: smooth;
  5. }
  7. html.no-scroll-snap {
  8.   scroll-snap-type: initial;
  9. }
  11. section {
  12.   height: 100vh;
  13.   position: relative;
  14.   scroll-snap-align: start;
  15.   color: white;
  16. }
  18. .bg-cyan {
  19.   background: cyan;
  20. }
  22. .bg-magenta {
  23.   background: magenta;
  24. }
  26. .bg-yellow {
  27.   background: yellow;
  28.   color: black;
  29. }
  31. .bg-key {
  32.   background: black;
  33. }
  35. .bg-red {
  36.   background: red;
  37. }
  39. .bg-blue {
  40.   background: blue;
  41. }
  43. .bg-green {
  44.   background: green;
  45. }
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  3. <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" />
  5. <main>
  6.   <section class="bg-cyan">CYAN</section>
  7.   <section class="bg-magenta">MAGENTA</section>
  8.   <section class="bg-yellow">YELLOW</section>
  9.   <section class="bg-key">BLACK</section>
  10.   <section class="bg-red">RED</section>
  11.   <section class="bg-blue">BLUE</section>
  12.   <section class="bg-green">GREEN</section>
  13. </main>
英文:

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. $(window).on(&#39;scroll&#39;, function() {
  2.   if ($(window).scrollTop() &gt; $(&#39;.bg-key&#39;).offset().top) {
  3.     $(&#39;html&#39;).addClass(&#39;no-scroll-snap&#39;);
  4.   } else {
  5.     $(&#39;html&#39;).removeClass(&#39;no-scroll-snap&#39;);
  6.   }
  7. });

<!-- language: lang-css -->

  1. html {
  2.   overflow-y: scroll;
  3.   scroll-snap-type: y mandatory;
  4.   scroll-behavior: smooth;
  5. }
  7. html.no-scroll-snap {
  8.   scroll-snap-type: initial;
  9. }
  11. section {
  12.   height: 100vh;
  13.   position: relative;
  14.   scroll-snap-align: start;
  15.   color: white;
  16. }
  18. .bg-cyan {
  19.   background: cyan;
  20. }
  22. .bg-magenta {
  23.   background: magenta;
  24. }
  26. .bg-yellow {
  27.   background: yellow;
  28.   color: black;
  29. }
  31. .bg-key {
  32.   background: black;
  33. }
  35. .bg-red {
  36.   background: red;
  37. }
  39. .bg-blue {
  40.   background: blue;
  41. }
  43. .bg-green {
  44.   background: green;
  45. }

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  3. &lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
  5. &lt;main&gt;
  6.   &lt;section class=&quot;bg-cyan&quot;&gt;CYAN&lt;/section&gt;
  7.   &lt;section class=&quot;bg-magenta&quot;&gt;MAGENTA&lt;/section&gt;
  8.   &lt;section class=&quot;bg-yellow&quot;&gt;YELLOW&lt;/section&gt;
  9.   &lt;section class=&quot;bg-key&quot;&gt;BLACK&lt;/section&gt;
  10.   &lt;section class=&quot;bg-red&quot;&gt;RED&lt;/section&gt;
  11.   &lt;section class=&quot;bg-blue&quot;&gt;BLUE&lt;/section&gt;
  12.   &lt;section class=&quot;bg-green&quot;&gt;GREEN&lt;/section&gt;
  13. &lt;/main&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月7日 08:43:09
  • 转载请务必保留本文链接：https://go.coder-hub.com/76191785.html
  • css
  • html
  • scroll-snap
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定