标签: scroll-snap

您可以通过按下水平滚动我的演示页Space Bar，Page Up / Page Down和Left Arrow / Right Arrow键。您也可以使用鼠标或触控板捕捉滚动。

但是只有其中一项有效。

键盘事件和CSS滚动捕捉是否可以共存？我想念什么？任何帮助将不胜感激，因为我一直在努力解决这个问题超过一个星期。

在CodePen上查看我的演示

（请取消注释相关的CSS代码段以启用滚动捕捉效果，以查看键盘快捷键停止工作。）

import animate from "https://cdn.jsdelivr.net/npm/animateplus@2/animateplus.js"

const sections = Array.from(document.querySelectorAll("section")).sort(
  (s1, s2) => {
    return s1.getBoundingClientRect().left - s2.getBoundingClientRect().left
  }
)

const getSectionInView = () => {
  const halfWidth = window.innerWidth / 2
  const index = sections.findIndex(
    section =>
      section.getBoundingClientRect().left <= halfWidth &&
      section.getBoundingClientRect().right > halfWidth
  )
  return index
}

const getNextSection = dir => {
  const sectionInViewIndex = getSectionInView()
  const nextIndex = …

我正在构建一个简单的滑块动画，该动画使用本机 CSS 滚动捕捉和滚动事件监听器进行控制。您可以在这里看到一个工作示例： https: //codepen.io/juliangarnier/pen/10d5ad6a2d9bf2cbac8e8d2e289153fa 我正在尝试在桌面上添加单击和拖动行为，不幸的是，当scrollLeft值为通过 JavaScript 更新。它的工作原理是设置scroll-snap-type: none;用户何时开始拖动，但删除平滑的捕捉动画。

我注意到，在 Chrome 开发工具中模拟触摸事件时，使用鼠标时滚动动画效果非常好。我想知道是否可以重新创建 Chrome 开发工具在纯 JS 中使用的同类触摸事件模拟。或者，如果有人设法scroll-snap-type: x mandatory;在保持捕捉动画的同时手动更新元素的滚动位置。

编辑：

这是该示例的更新版本，其中使用了鼠标事件

el.scrollTo({
  left: newScrollLeft,
  behavior: 'smooth'
})

事件上mouseup，并切换滚动捕捉属性。

https://codepen.io/juliangarnier/pen/b3bc58f943768f5276563ae7077e41e0?editors=0100

它非常接近我想要的，但仍然缺少使用正常滚动手势时出现的滚动动量。

我对CSS 滚动捕捉有疑问。我想通过 JavaScript 检测捕捉的元素并分配它，例如 CSS 类或类似的。

不幸的是，我还没有找到检测捕捉元素的方法。背景：我有一个包含子项目的列表，这些子项目是滚动的，列表中的中间项目始终应突出显示：

布局

我已经用 rootMargin 测试了交叉观察器来检测垂直居中的元素，但它\xe2\x80\x99 的错误多于有用。

超文本标记语言

<div class="timeline-menu-dropdown-years-list-container">\n    <ul class="timeline-menu-dropdown-years-list timeline-menu-dropdown-years-text" id="yearcontainer">\n        <li id="2010" class="timeline-dropdown-year" data-target="year-2010">2010</li>\n        <li id="2009" class="timeline-dropdown-year" data-target="year-2009">2009</li>\n        <li id="2008" class="timeline-dropdown-year" data-target="year-2008">2008</li>\n        <li id="2007" class="timeline-dropdown-year" data-target="year-2007">2007</li>\n        <li id="2006" class="timeline-dropdown-year" data-target="year-2006">2006</li>\n        <li id="2005" class="timeline-dropdown-year" data-target="year-2005">2005</li>\n        <li id="2004" class="timeline-dropdown-year" data-target="year-2004">2004</li>\n        <li id="2003" class="timeline-dropdown-year" data-target="year-2003">2003</li>\n        <li id="2002" class="timeline-dropdown-year" data-target="year-2002">2002</li>\n        <li id="2001" class="timeline-dropdown-year" data-target="year-2001">2001</li>\n        <li id="2000" class="timeline-dropdown-year" data-target="year-2000">2000</li>\n    </ul>\n</div>\n

CSS

.timeline-menu-dropdown-years-list-container {\n  max-height: 250px;\n  overflow: scroll;\n …

抽象的

我正在使用可滚动元素创建一个图像库。我正在使用 CSS 的scroll-snap功能，它允许我捕捉到滚动条中的元素（图像）。

通过绑定到元素的scroll事件，我在用户滚动元素时应用各种操作（例如预加载、隐藏界面元素等）。其中之一取决于滚动事件，并且需要在滚动完成的确切时刻停止。但是滚动快照给我带来了一种无法预见但尚未处理的情况；

我无法准确确定快速滚动操作是否完成。

我可以在每个滚动上设置一个setTimeout，它会自行取消并重新设置 - 有效地消除抖动 - 如果不重置，最后会被调用。但是设置此值时使用的超时可能意味着在确定滚动完成时“为时已晚”。

底线：如何检查滚动是否完成，因为：

1. 用户已停止滚动，或者；
2. 滚动条已到达其捕捉点（scroll-snap-type已设置）

无论我更改scroll-snap-type还是scroll-snap-align，Safari都会失去滚动位置并从第一个scroll-snap元素开始。这个问题可以在此处的滚动示例中轻松重现： https: //developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type。只需切换到scroll-snap-type：强制，滚动到第二个或第三个元素。然后切换到scroll-snap-type:none，然后再次切换回scroll-snap-type:mandatory。在所有浏览器中，滚动位置保持不变，在 Safari 中，它又从 0 开始。

为什么我需要这个？我正在使用更改滚动顶部位置的滚动动画。在 Safari 中使用滚动捕捉时，动画不起作用，例如，单击导航链接滚动到另一个部分时。所以我的想法是在使用导航链接时关闭滚动捕捉，并在完成后再次打开它。在所有浏览器中工作正常，导致 Safari 中出现所描述的问题。我也尝试更改滚动对齐，但它是相同的。

有人遇到过同样的问题吗？您找到解决方法/解决方案了吗？

我们如何使用scroll-snap CSS API 控制动画的速度？

在此示例中： https: //codepen.io/newinweb/pen/EpPgdR

function toggleSnap() {
  var snapEnabled = document.getElementById('carousel').classList.toggle('snap');
  document.getElementById('otherSnappingState').innerText = snapEnabled ? 'off' : 'on';
}

function toggleDirection() {
  var isVertical = document.getElementById('carousel').classList.toggle('vertical');
  document.getElementById('otherScrollState').innerText = isVertical ? 'horizontal' : 'vertical';
}

#carousel {
  /* Ensure that the contents flow horizontally */
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
}

#carousel.vertical {
  flex-direction: column;
}

/* 2018 spec - For Safari 11, Chrome 69+ */
#carousel.snap {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* Needed to work …

对此很新，但我有一页具有滚动捕捉功能的部分，但在 chrome 上查看时，过渡一点也不平滑，它从一个部分跳到另一个部分太快了。有什么办法可以解决这个问题吗？？

https://www.matthewjameswilson.com/

这是我正在使用的代码：

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

我正在努力解决 CSS 中的滚动对齐问题。

有没有一种方法可以仅在一个垂直方向上使用滚动捕捉？

我想让它在向下滚动时捕捉到每个部分，但在再次向上滚动时不捕捉到。可以在 CSS 中实现吗？或者我需要一些 JavaScript 吗？

html {
    scroll-snap-type: y mandatory;
}

body {
    margin: 0;
    scroll-snap-type: y mandatory;
  }
  
  section {
    font-family: sans-serif;
    font-size: 12ch;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start; 
  }
 

  <head>

    <!-- MAIN STYLE -->
    <link rel="stylesheet" href="style.css">
    

  </head>

    <main>
     <section>
        <h1>Hello!</h1>
     </section>

     <section>
        <h1>Toodles~</h1>
     </section>

     <section>
        <h1>Boodles~</h1>
     </section>
            
    </main>

</html> 

我设置了 CSS Scroll Snap，如果可能的话，我想对其实施缓动。一旦它捕捉到一个点，它就会滚动得太快。有没有办法使用 CSS、JavaScript 或外部动画库来调整滚动捕捉速度/缓动？我的项目是 ASP.NET Core 5 MVC Web 应用程序。

html, body {
  margin: 0;
  padding: 0;
  scroll-snap-type: y proximity;
}

.landing-page-content {
  scroll-snap-align: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.landing-page-content h1 {
  color: black;
  margin: 0;
}

.s1 {
  background-color: red;
}

.s2 {
  background-color: yellow;
}

.s3 {
  background-color: blue;
}

.s4 {
  background-color: green;
}

.background-image {
  background-image: url(..pathToImage);
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 100vw;
  background-repeat: no-repeat; …

当我有一个内部.sections包含多个.section元素的容器并设置滚动捕捉时，只有当我为该部分指定 100vh 的固定高度时，它才会起作用。如果没有高度，滚动捕捉将不起作用。这很好，除了没有固定高度，scrollTo工作正常，当我将高度添加到该部分时，scrollTo不再工作。

这是一个例子。height: 100vh;您可以在CSS 中注释掉该行.section，然后看到单击任意位置都会向下滚动到第 3 部分，但打开高度后，它不会滚动。

我尝试过console.log它滚动到的位置并且它是正确的，但滚动实际上从未发生。关于为什么这没有按照我想要的方式运行有什么想法吗？

注意：我在最新的 Chrome 中看到了这种行为。我还没有测试过其他浏览器。

// Click on document to scroll to section 3
document.body.onclick = function() {
    console.log('SCROLLING...');
    const el = document.getElementById('s3');
    const pos = el.getBoundingClientRect();
    window.scrollTo(0, pos.top); 
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}
.sections {
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    /**
     * Adding the below line breaks …