2023年5月7日 08:43:09go评论66阅读模式

英文:

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

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;
}

&lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css&quot; rel=&quot;stylesheet&quot;/&gt;

&lt;main&gt;
  &lt;section class=&quot;bg-cyan&quot;&gt;CYAN&lt;/section&gt;
  &lt;section class=&quot;bg-magenta&quot;&gt;MAGENTA&lt;/section&gt;
  &lt;section class=&quot;bg-yellow&quot;&gt;YELLOW&lt;/section&gt;
  &lt;section class=&quot;bg-key&quot;&gt;BLACK&lt;/section&gt;
  &lt;section class=&quot;bg-red&quot;&gt;RED&lt;/section&gt;
  &lt;section class=&quot;bg-blue&quot;&gt;BLUE&lt;/section&gt;
  &lt;section class=&quot;bg-green&quot;&gt;GREEN&lt;/section&gt;
&lt;/main&gt;

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

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;
}

&lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css&quot; rel=&quot;stylesheet&quot;/&gt;

&lt;main&gt;
  &lt;section class=&quot;bg-cyan&quot;&gt;CYAN&lt;/section&gt;
  &lt;section class=&quot;bg-magenta&quot;&gt;MAGENTA&lt;/section&gt;
  &lt;section class=&quot;bg-yellow&quot;&gt;YELLOW&lt;/section&gt;
  &lt;section class=&quot;bg-key&quot;&gt;BLACK&lt;/section&gt;
  &lt;section class=&quot;bg-red&quot;&gt;RED&lt;/section&gt;
  &lt;section class=&quot;bg-blue&quot;&gt;BLUE&lt;/section&gt;
  &lt;section class=&quot;bg-green&quot;&gt;GREEN&lt;/section&gt;
&lt;/main&gt;

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.

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;
}

&lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css&quot; rel=&quot;stylesheet&quot;/&gt;

&lt;main&gt;
  &lt;section class=&quot;bg-cyan&quot;&gt;CYAN&lt;/section&gt;
  &lt;section class=&quot;bg-magenta&quot;&gt;MAGENTA&lt;/section&gt;
  &lt;section class=&quot;bg-yellow&quot;&gt;YELLOW&lt;/section&gt;
  &lt;section class=&quot;bg-key&quot;&gt;BLACK&lt;/section&gt;
  &lt;section class=&quot;bg-red&quot;&gt;RED&lt;/section&gt;
  &lt;section class=&quot;bg-blue&quot;&gt;BLUE&lt;/section&gt;
  &lt;section class=&quot;bg-green&quot;&gt;GREEN&lt;/section&gt;
&lt;/main&gt;

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

$(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>

英文:

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(&#39;scroll&#39;, function() {
  if ($(window).scrollTop() &gt; $(&#39;.bg-key&#39;).offset().top) {
    $(&#39;html&#39;).addClass(&#39;no-scroll-snap&#39;);
  } else {
    $(&#39;html&#39;).removeClass(&#39;no-scroll-snap&#39;);
  }
});

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;
}

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;

&lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css&quot; rel=&quot;stylesheet&quot; /&gt;

&lt;main&gt;
  &lt;section class=&quot;bg-cyan&quot;&gt;CYAN&lt;/section&gt;
  &lt;section class=&quot;bg-magenta&quot;&gt;MAGENTA&lt;/section&gt;
  &lt;section class=&quot;bg-yellow&quot;&gt;YELLOW&lt;/section&gt;
  &lt;section class=&quot;bg-key&quot;&gt;BLACK&lt;/section&gt;
  &lt;section class=&quot;bg-red&quot;&gt;RED&lt;/section&gt;
  &lt;section class=&quot;bg-blue&quot;&gt;BLUE&lt;/section&gt;
  &lt;section class=&quot;bg-green&quot;&gt;GREEN&lt;/section&gt;
&lt;/main&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

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

问题

答案1

答案2

CSS ‘word-spacing’属性不正常工作。

带有背景颜色和不透明度的前景CSS文本

使用精灵时出现问题，角色精灵有额外的间距。

CSS或其他Antora/Asciidoc选项以在HTML文件中显示SVG工具提示的代码。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论