作者：Ahmad
译者：前端小智
起源：ishadee
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
你是否常常心愿有一个CSS个性能够轻松创立一个可滚动的容器? CSS scroll snap 能够做到这一点。在晚期的前端开发中，我依附 JS 插件来创立滑块组件。有时，咱们须要一种简略的办法来疾速将元素制作成可滚动的容器。当初，多亏了 CSSS scroll snap ，咱们能够简略做到这一点。
为什么要应用 CSS Scroll Snap
随着挪动设施和平板设施的衰亡，咱们须要设计和构建能够轻触的组件。 以图库组件为例。 用户能够轻松地向左或向右滑动以查看更多图像，而不是分层构造。
依据CSS标准，为开发者提供良好管制的滚动体验是引入 CSS scroll snap的次要起因之一。它加强了用户体验，并使其更容易实现滚动体验。
滚动容器的基础知识
要创立一个滚动容器，以下是咱们须要做的根本内容
- 应用
overflow - 一种将我的项目彼此相邻显示（内联）的办法
举个例子:
<div class="section"> <div class="section__item">Item 1</div> <div class="section__item">Item 2</div> <div class="section__item">Item 3</div> <div class="section__item">Item 4</div> <div class="section__item">Item 5</div></div>.section { white-space: nowrap; overflow-x: auto;}多年来，应用white-space: nowrap是一种风行的CSS解决方案，用于强制元素放弃内联。不过，当初咱们根本都应用 Flexbox :
.section { display: flex; overflow-x: auto;}这是创立滚动容器的根本办法。然而，这还不够，这不是一个可用的滚动容器。
滚动容器有什么问题
问题是，与滑动相比，它们并不能提供良好的体验。在触摸屏上滑动手势的次要益处是，咱们能够用一根手指程度或垂直滚动。
实际上须要将每个我的项目挪动到它本人的地位。这并不是滑动，这是一种十分蹩脚的体验，通过应用CSS scroll snap，咱们能够通过简略地定义snap points来解决这个问题，它将使用户更容易地程度或垂直滚动。
接着，咱们来看看如何应用CSS scroll snap。
CSS Scroll Snap 简介
要在容器上应用scroll snap，它的子项目应该内联显示，这能够用我下面解释的办法之一来实现。我抉择CSS flexbox:
<div class="section"> <div class="section__item">Item 1</div> <div class="section__item">Item 2</div> <div class="section__item">Item 3</div> <div class="section__item">Item 4</div> <div class="section__item">Item 5</div></div>.section { display: flex; overflow-x: auto;}了这个，咱们须要增加另外两个属性来让scroll snap工作。咱们应该在哪里增加它们?
首先，咱们须要将scroll-snap-type增加到滚动容器中。 在咱们的示例中，是.section元素。 而后，咱们须要向子项（即.section__item）增加scrolln-snap-align。
.section { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;}.section__item { scroll-snap-align: start;}这里你可能想晓得x mandatory和start是干嘛用的。 不必放心，这是本文的外围，上面会对其进行深刻的解说。
这一刻，我对CSS scroll snap十分兴奋,它使滚动更加天然。当初，让咱们深入研究scroll snap 属性。
Scroll Snap Type
依据CSS标准，scroll-snap-type 属性定义在滚动容器中的一个长期点（snap point）如何被严格的执行。
滚动容器的轴线
滚动容器的轴示意滚动方向，它能够是程度或垂直的，x值示意程度滚动，而y示意垂直滚动。
/* 程度*/.section { display: flex; overflow-x: auto; scroll-snap-type: x;}/* 垂直*/.section { height: 250px; overflow-y: auto; scroll-snap-type: y;}Scroll Snap 容器的严格性
咱们不仅能够定义Scroll Snap的方向，还能够定义它的严格水平。这能够通过应用scroll-snap-type值的andatory | proximity来实现。
mandatory：如果它以后没有被滚动，这个滚动容器的可视视图将静止在长期点上。意思是当滚动动作完结，如果可能，它会长期在那个点上。如果内容被增加、挪动、删除或者重置大小，滚动偏移将被调整为放弃静止在长期点上。mandatory关键字意味着浏览器必须捕捉到每个滚动点。假如roll-snap-align属性有一个start值。这意味着，滚动必须对齐到滚动容器的开始处。
在下图中，每次用户向右滚动时，浏览器都会将我的项目捕捉到容器的结尾。
.section { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;}.section__item { scroll-snap-align: start;}试着在上面的演示中向右滚动。如果你应用的是手机或平板电脑，能够向右挪动滚动条或应用触摸。应该能感触到每个我的项目是如何从其容器的开始抓取的。
演示地址：https://codepen.io/shadeed/pe...
然而，如果该值是proximity，则浏览器将实现这项工作，它可能会吸附到定义的点(在咱们的例子中start)。留神，proximity 是默认值，然而为了清晰起见，咱们这里还是申明一下它。
.section { display: flex; overflow-x: auto; /* proximity is the default value, I added it for clarity reasons */ scroll-snap-type: x proximity;}Scroll Snapping Alignment
滚动容器的子项目须要一个对齐点，它们能够对齐到这个点。咱们能够用start, center或end。
为了更容易了解，上面是它的工作原理。
假如咱们在滚动容器上有一块磁铁，这将有助于咱们管制捕获点。 如果scroll-snap-type是垂直的，则对齐对齐将是垂直的。 参见下图：
滚动容器的 start
子项目将吸附到其程度滚动容器的开始处。
滚动容器的 center
子项目将吸附到其滚动容器的核心。
滚动容器的 end
子项将对齐到其滚动容器的开端。
应用 Scroll-Snap-Stop
有时，咱们可能须要一种办法来避免用户在滚动时意外跳过一些重要的项。如果用户滚动太快，就有可能跳过某些项。
.section__item { scroll-snap-align: start; scroll-snap-stop: normal;}法动太快可能会跳过三个或四个我的项目，如下所示：
scroll-snap-stop的默认值是normal,要强制滚动捕捉到每个可能的点，应应用always。
.section__item { scroll-snap-align: start; scroll-snap-stop: always;}这样，用户能够一次滚动到一个捕获点，这种形式有助于防止跳过重要内容。 设想每个进行点都有一个进行标记，参见上面的动画：
演示地址：https://codepen.io/shadeed/pe...
Scroll Snap Padding
scroll-padding设置所有侧面的滚动边距，相似于padding属性的工作形式。 在下图中，滚动容器的左侧有50px的内边距。 后果，子元素将从左侧边缘捕捉到50px
直滚动也是如此。参见上面的示例：
.section { overflow-y: auto; scroll-snap-type: y mandatory; scroll-padding: 50px 0 0 0;}Scroll Snap Margin
scroll-margin设置滚动容器的子项之间的间距。 在向元素增加边距时，滚动将依据边距对齐。 参见下图：
.item-2具备scroll-margin-left: 20px。 后果，滚动容器将在该我的项目之前对齐到20px。 请留神，当用户再次向右滚动时，.item-3会捕捉到滚动容器的结尾，这意味着仅具备边距的元素将受到影响。
CSS Scroll Snap 用例
图片列表
scroll snap 的一个很好的用例是图像列表，应用 scroll snap 提供更好的滚动体验。
.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;}留神，我应用x作为scroll-snap-type的值。
事例地址:https://codepen.io/shadeed/pe...
好友清单
滚动捕获的另一个很好的用例是敌人列表。 上面的示例摘自Facebook（一个实在的示例）。
.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;}请留神，滚动容器的padding-bottom：32px。 这样做的目标是提供额定的空间，以便box-shadow能够按预期显示。
头像列表
对于此用例，我感兴趣的是将center作为scroll-snap-align的值。
.list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;}.list-item { scroll-snap-align: center;}这在一个角色列表中是很有用的，角色在滚动容器的两头是很重要的
演示地址：https://codepen.io/shadeed/pe...
全屏展现
应用scroll snap也能够用于垂直滚动，全屏展现就是一个很好的例子。
<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></main>main { height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch;}.section { height: 100vh; scroll-snap-align: start;}块和内联
值得一提的是，对于scroll-snap-type，能够应用inline和block逻辑值。参见上面的示例
main { scroll-snap-type: inline mandatory;}可读性
应用 CSS scroll snap时，请确保可拜访性。 这是滚动对齐的一种不好用法，它阻止用户自在滚动内容以读取内容。
.wrapper { scroll-snap-type: y mandatory;}h2 { scroll-snap-align: start;}请务必不要这样做。
总结
这是我刚刚学到的一个新的CSS个性的长篇文章。我心愿它对你有用。
我是小智，咱们下期在见！
代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。
原文：https://ishade.com/article/cs...
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。