当前位置: 首页 > 科技观察

使用CSSSnap优化滚动,提升用户体验

时间:2023-03-13 21:36:49 科技观察

你有没有想过有一个CSS功能可以轻松创建一个可滚动的容器?CSSscrollsnap可以做到。前端开发初期,我都是依赖JS插件来创建滑块组件。有时,我们需要一种简单的方法来快速将元素制作成可滚动的容器。现在,多亏了CSSSscrollsnap,我们可以轻松做到这一点。为什么使用CSSScrollSnap随着移动和平板设备的兴起,我们需要设计和构建可以点击的组件。以图库组件为例。用户可以轻松地向左或向右滑动以查看更多图像,而不是分层结构。根据CSS规范,为开发人员提供可控的滚动体验是引入CSS滚动快照的主要原因之一。它增强了用户体验并使滚动体验更容易实现。滚动容器的基础要创建一个滚动容器,这里是我们需要做的基础使用overflow一种将项目并排显示(内联)的方法例如:Item1

Item2
Item3
Item4
Item5.section{white-space:nowrap;overflow-x:auto;}多年来,使用white-space:nowrap一直是一种流行的CSS解决方案,用于强制元素留在对联中。然而,现在我们主要使用Flexbox:.section{display:flex;overflow-x:auto;}这是创建可滚动容器的基本方法。然而,这还不够,这不是一个可用的滚动容器。滚动容器有什么问题问题在于,与滑动相比,它们不能提供良好的体验。在触摸屏上滑动手势的主要好处是我们可以用一根手指水平或垂直滚动??。每个项目实际上都需要移动到它自己的位置。不是滑动,真的是很糟糕的体验,通过CSSscrollsnap我们可以通过简单的定义snap点来解决这个问题,这样用户就可以更容易地水平或垂直滚动??。接下来,我们就来看看如何使用CSSscrollsnap。CSSScrollSnap简介要在容器上使用滚动捕捉,其子项应该内联显示,这可以使用我上面解释的方法之一来实现。我选择CSSflexbox:Item1Item2Item3Item4Item5.section{display:flex;overflow-x:auto;}看到这里我们还要加两个使滚动捕捉工作的属性。我们应该在哪里添加它们?首先,我们需要将scroll-snap-type添加到滚动容器中。在我们的示例中,.section元素。然后,我们需要给孩子添加scrolln-snap-align(即.section__item)。.section{display:flex;overflow-x:auto;scroll-snap-type:xmandatory;}.section__item{scroll-snap-align:start;}这里你可能想知道xmandatory和start是干什么用的。别着急,这就是本文的核心,下面会深入讲解。目前,我对CSSscrollsnap感到非常兴奋,它使滚动更加自然。现在,让我们深入研究scrollsnap属性。ScrollSnapType根据CSS规范,**scroll-snap-type**属性定义了如何严格执行滚动容器中的临时点(捕捉点)。滚动容器的轴滚动容器的轴表示滚动的方向,可以是水平方向也可以是垂直方向,x值表示水平滚动,y值表示垂直滚动。/*水平*/.section{display:flex;overflow-x:auto;scroll-snap-type:x;}/*vertical*/.section{height:250px;overflow-y:auto;scroll-snap-type:y;}ScrollSnap容器的严格性我们不仅可以定义ScrollSnap的方向,还可以定义它的严格性。这可以通过使用强制|来实现。与scroll-snap-type值的接近度。mandatory:如果当前没有被滚动,这个滚动容器的视觉视图将在临时点是静态的。这意味着当滚动动作完成时,如果可能的话,它会暂时停留在那个点。如果内容被添加、移动、删除或调整大小,滚动偏移将被调整以保持在临时点。mandatory关键字意味着浏览器必须捕获每个滚动点。假设roll-snap-align属性有一个起始值。这意味着,滚动必须与滚动容器的开头对齐。在下图中,每次用户向右滚动时,浏览器都会将项目捕捉到容器的开头。.section{display:flex;overflow-x:auto;scroll-snap-type:xmandatory;}.section__item{scroll-snap-align:start;}尝试在下面的演示中向右滚动。如果您使用的是手机或平板电脑,请向右滚动或使用触摸。您应该了解每个项目是如何从其容器的开头抓取的。演示地址:https://codepen.io/shadeed/pen/RwGaXKB但是,如果值为proximity,浏览器将完成这项工作,它可能会捕捉到定义的点(在我们的例子中是开始)。请注意,proximity是默认值,但为了清楚起见,我们在这里声明它。.section{display:flex;overflow-x:auto;/*proximityisthedefaultvalue,Iaddeditforclarityreasons*/scroll-snap-type:xproximity;}ScrollSnappingAlignmentScroll容器的子项需要一个对齐点才能对齐。我们可以使用开始、中心或结束。为了更容易理解,下面是它的工作原理。假设我们在滚动容器上有一块磁铁,这将帮助我们控制捕捉点。如果scroll-snap-type是垂直的,则对齐将是垂直的。见下图:滚动容器的开始子项将捕捉到其水平滚动容器的开始。滚动容器的中心子项将捕捉到其滚动容器的中心。滚动容器的末端子元素将与其滚动容器的末端对齐。使用Scroll-Snap-Stop有时,我们可能需要一种方法来防止用户在滚动时不小心跳过一些重要的项目。如果用户滚动得太快,则可能会跳过某些项目。.section__item{scroll-snap-align:start;scroll-snap-stop:normal;}移动速度不能太快,可能会跳过三四项,如下图:scroll-snap-stop默认值为normal,要强制滚动以捕捉到每个可能的点,始终应使用。.section__item{scroll-snap-align:start;scroll-snap-stop:always;}这样用户可以一次滚动到一个快照点,这有助于避免跳过重要内容。想象一下每个停止点都有一个停止标志,看下面的动画:Demo地址:https://codepen.io/shadeed/pen/JjRbXzaScrollSnapPaddingscroll-padding设置所有边的滚动边距,类似于padding属性的工作方式。在下图中,滚动容器的左侧有50像素的内边距。因此,子元素也将捕捉到距离左边缘50像素的直线滚动。请参见下面的示例:.section{overflow-y:auto;scroll-snap-type:ymandatory;scroll-padding:50px000;}ScrollSnapMarginscroll-margin设置滚动容器的子项之间的间距。为元素添加边距时,滚动将根据边距对齐。见下图:.item-2有scroll-margin-left:20px。结果,滚动容器将对齐到项目之前的20px。请注意,当用户再次向右滚动时,.item-3会捕捉到滚动容器的开头,这意味着只有具有边距的元素才会受到影响。CSSScrollSnap用例图像列表滚动捕捉的一个很好的用例是图像列表,使用滚动捕捉来提供更好的滚动体验。.images-list{display:flex;overflow-x:auto;scroll-snap-type:x;gap:1rem;-webkit-overflow-scrolling:touch;/*iOS设备重要*/}.images-listimg{scroll-snap-align:start;}请注意,我使用x作为scroll-snap-type的值。示例地址:https://codepen.io/shadeed/pen/jOMrxYO好友列表滚动捕获的另一个很好的用例是好友列表。下面的例子取自Facebook(一个真实的例子)。.list{display:flex;overflow-x:auto;scroll-snap-type:xmandatory;gap:1rem;scroll-padding:48px;padding-bottom:32px;-webkit-overflow-scrolling:touch;}.list-item{scroll-snap-align:start;}请注意滚动容器的padding-bottom:32px。这样做的目的是提供额外的空间,以便box-shadow可以按预期显示。AvatarList对于这个用例,我感兴趣的是将center作为scroll-snap-align的值。.list{display:flex;overflow-x:auto;scroll-snap-type:xmandatory;-webkit-overflow-scrolling:touch;}.list-item{scroll-snap-align:center;}这是在一个作用list在滚动容器的中心非常有用。demo地址很重要:https://codepen.io/shadeed/pen/KKgMJWa全屏显示使用scrollsnap也可以用于垂直滚动,全屏显示就是一个很好的例子。
main{height:100vh;overflow-y:auto;scroll-snap-type:ymandatory;-webkit-overflow-scrolling:touch;}.section{height:100vh;scroll-snap-align:start;}block和inline值得一提的是,对于scroll-snap-type,inline和block都可以使用逻辑值。请参见下面的示例main{scroll-snap-type:inlinemandatory;}可读性使用CSS滚动捕捉时确保可访问性。这是对滚动对齐的错误使用,它会阻止用户自由滚动以阅读内容。.wrapper{scroll-snap-type:ymandatory;}h2{scroll-snap-align:start;}一定不要这样做。总结这是一篇关于我刚刚了解到的新CSS功能的长篇文章。我希望这个对你有用。