转动必需对齐到转动容器的开始处， mandatory：假如它当前没有被转动，x值暗示程度转动，我们需要向子项（即.section__item）添加scrolln-snap-align，与滑动对比。

这将有助于我们节制捕获点，这意味着仅具有边距的元素将受到影响， 事例地点:https://codepen.io/shadeed/pe... 挚友清单 转动捕获的另一个很好的用例是伴侣列表，我们需要添加别的两个属性来让 scroll snap 事情，我们大概需要一种要领来防备用户在转动时意外跳过一些重要的项，它们并不能提供精采的体验，我感乐趣的是将center作为scroll-snap-align的值，此刻， .wrapper { scroll-snap-type: y mandatory;}h2 { scroll-snap-align: start;} 请务必不要这样做。

我但愿它对你有用， 在下图中，而y暗示垂直转动，这种方法有助于制止跳过重要内容， 实际上需要将每个项目移动到它本身的位置， mandatory要害字意味着欣赏器必需捕获到每个转动点， 用户可以轻松地向左或向右滑动以查察更多图像， 转动容器有什么问题 问题是，我们可以用一根手指程度或垂直转动。

转动将按照边距对齐。

留意，意思是当转动行动竣事，并使其更容易实现转动体验， 按照CSS类型，假如该值是proximity，这并不是滑动。

proximity 是默认值， 转动容器的 center 子项目将吸附到其转动容器的中心，拜见下面的示例： .section { overflow-y: auto; scroll-snap-type: y mandatory; scroll-padding: 50px 0 0 0;} Scroll Snap Margin scroll-margin配置转动容器的子项之间的间距，这是一种很是糟糕的体验，以便box-shadow可以按预期显示， .section__item { scroll-snap-align: start; scroll-snap-stop: normal;} 法动太快大概会跳过三个或四个项目， .section { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;}.section__item { scroll-snap-align: start;} 这里你大概想知道x mandatory和start是干嘛用的。

.images-list { display: flex; overflow-x: auto; scroll-snap-type: x; gap: 1rem; -webkit-overflow-scrolling: touch; /* Important for iOS devices */}.images-list img { scroll-snap-align: start;} 留意， 然后， 在向元素添加边距时， 演示地点：https://codepen.io/shadeed/pen/RwGaXKB 可是， CSS Scroll Snap 简介 要在容器上利用 scroll snap ，它大概会吸附到界说的点(在我们的例子中start)。

应该能感觉到每个项目是如何从其容器的开始抓取的， 拜见下图： .item-2具有scroll-margin-left: 20px。

是.section元素，对付scroll-snap-type，为开拓者提供精采节制的转动体验是引入 CSS scroll snap 的主要原因之一。

假设roll-snap-align属性有一个start值，这是本文的焦点，我选择CSS flexbox: div class=section div class=section__itemItem 1/div div class=section__itemItem 2/div div class=section__itemItem 3/div div class=section__itemItem 4/div div class=section__itemItem 5/div/div.section { display: flex; overflow-x: auto;} 了这个， I added it for clarity reasons */ scroll-snap-type: x proximity;} Scroll Snapping Alignment 转动容器的子项目需要一个对齐点，我对 CSS scroll snap 很是欢快， 转动容器的 end 子项将对齐到其转动容器的末端，它们可以对齐到这个点，多亏了 CSSS scroll snap ， 这样做的目标是提供特另外空间，转动容器的padding-bottom：32px，这可以通过利用scroll-snap-type值的andatory | proximity来实现， 接着，它阻止用户自由转动内容以读取内容，这不是一个可用的转动容器， 这是转动对齐的一种欠好用法， /* 程度*/.section { display: flex; overflow-x: auto; scroll-snap-type: x;}/* 垂直*/.section { height: 250px; overflow-y: auto; scroll-snap-type: y;} Scroll Snap 容器的严格性 我们不只可以界说Scroll Snap的偏向， 假设我们在转动容器上有一块磁铁， .section { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;}.section__item { scroll-snap-align: start;} 试着在下面的演示中向右转动，.item-3会捕获到转动容器的开头，此刻，请确保可会见性，请会见： IT之家入门 ！！ 以上就是优化转动的小能力：利用CSS Scroll Snap！！的具体内容，转动偏移将被调解为保持静止在姑且点上， 为了更容易领略， Scroll Snap Type 按照CSS类型，用于强制元素保持内联，假如你利用的是手机或平板电脑，它可以是程度或垂直的，下面会对其举办深入的讲授，这意味着。

我们来看看如何利用 CSS scroll snap ，它加强了用户体验，每次用户向右转动时，然而，它会姑且在谁人点上，转动容器将在该项目之前对齐到20px，这个转动容器的可视视图将静止在姑且点上。

我们应该在那边添加它们? 首先， 想象每个遏制点都有一个遏制符号，可是为了清晰起见，应利用always， 转动容器的轴线 转动容器的轴暗示转动偏向，我们需要将scroll-snap-type添加到转动容器中。

而不是分层布局， 功效， 请留意，子元素将从左侧边沿捕获到50px 直转动也是如此，不外，在触摸屏上滑动手势的主要长处是，我依靠 JS 插件来建设滑块组件， 为什么要利用 CSS Scroll Snap 跟着移动设备平静板设备的鼓起， .section__item { scroll-snap-align: start; scroll-snap-stop: always;} 这样，下面是它的事情道理，假如内容被添加、移动、删除可能重置巨细， .section { display: flex; overflow-x: auto; /* proximity is the default value， 假如scroll-snap-type是垂直的， scroll-snap-type 属性界说在转动容器中的一个姑且点（snap point）如何被严格的执行，我利用x作为scroll-snap-type的值，雷同于padding属性的事情方法， 这一刻，转动容器的左侧有50px的内边距，此刻我们根基都利用 Flexbox : .section { display: flex; overflow-x: auto;} 这是建设转动容器的根基要领，它将利用户更容易地程度或垂直转动，假如用户转动太快， 不消担忧，全屏展示就是一个很好的例子， 功效，可以向右移动转动条或利用触摸，还可以界说它的严格水平，它的子项目应该内联显示，当用户再次向右转动时，我们可以用start，假如大概，我们可以通过简朴地界说 snap points 来办理这个问题，我们需要一种简朴的要领来快速将元素建造成可转动的容器， main section class=section section-1/section section class=section section-2/section section class=section section-3/section section class=section section-4/section section class=section section-5/section/mainmain { height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch;}.section { height: 100vh; scroll-snap-align: start;} 块和内联 值得一提的是，如下所示： scroll-snap-stop的默认值是normal，我们需要设计和构建可以轻触的组件， 转动容器的基本常识 要建设一个转动容器。

欣赏器城市将项目捕获到容器的开头， CSS Scroll Snap 用例图片列表 scroll snap 的一个很好的用例是图像列表。

脚色在转动容器的中间是很重要的 演示地点：https://codepen.io/shadeed/pen/KKgMJWa 全屏展示 利用 scroll snap 也可以用于垂直转动， center或end。

.list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; scroll-padding: 48px; padding-bottom: 32px; -webkit-overflow-scrolling: touch;}.list-item { scroll-snap-align: start;} 请留意，利用white-space: nowrap是一种风行的CSS办理方案，拜见下面的动画： 演示地点：https://codepen.io/shadeed/pen/JjRbXza Scroll Snap Padding scroll-padding配置所有侧面的转动边距，则欣赏器将完成这项事情，更多请存眷红联其它相关文章！ 。

总结 这是我方才学到的一个新的CSS特性的长篇文章， 头像列表 对付此用例，这还不足，在早期的前端开拓中，则对齐对齐将是垂直的， 原文地点：https://ishade.com/article/css-scroll-snap/ 作者：Ahmad 译文地点：https://segmentfault.com/a/1190000038459089 更多IT之家相关常识。

（进修视频分享： css视频教程 ） 你是否常常但愿有一个CSS特性可以轻松建设一个可转动的容器? CSS scroll snap 可以做到这一点， 拜见下图： 转动容器的 start 子项目将吸附到其程度转动容器的开始处，拜见下面的示例 main { scroll-snap-type: inline mandatory;}可读性 利用 CSS scroll snap时，我们这里照旧声明一下它，以下是我们需要做的根基内容 利用 overflow 一种将项目相相互邻显示（内联）的要领 举个例子: div class=section div class=section__itemItem 1/div div class=section__itemItem 2/div div class=section__itemItem 3/div div class=section__itemItem 4/div div class=section__itemItem 5/div/div.section { white-space: nowrap; overflow-x: auto;} 多年来，可以利用inline和block逻辑值，就有大概跳过某些项， 在我们的示例中，用户可以一次转动到一个捕获点， 利用 Scroll-Snap-Stop 有时，让我们深入研究 scroll snap 属性， .list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;}.list-item { scroll-snap-align: center;} 这在一个脚色列表中是很有用的，要强制转动捕获到每个大概的点，这可以用我上面表明的要领之一来实现，我们可以简朴做到这一点， 在下图中， 下面的示例摘自Facebook（一个真实的示例），有时。

通过利用 CSS scroll snap ，利用 scroll snap 提供更好的转动体验，它使转动越发自然。

以图库组件为例，。