当前位置: 首页 > Web前端 > vue.js

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

时间:2023-04-01 00:16:47 vue.js

作者:Ahmad译者:前端小智来源:isadee有梦想,有干货,微信搜索【大千世界】追踪这位凌晨还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi,里面有完整的测试站点、资料和我的一线厂商访谈系列文章。您是否曾希望通过CSS功能轻松创建可滚动的容器?CSSscrollsnap可以做到。前端开发初期,我都是依赖JS插件来创建滑块组件。有时,我们需要一种简单的方法来快速将元素制作成可滚动的容器。现在,多亏了CSSSscrollsnap,我们可以轻松做到这一点。为什么使用CSSScrollSnap随着移动和平板设备的兴起,我们需要设计和构建可以点击的组件。以图库组件为例。用户可以轻松地向左或向右滑动以查看更多图像,而不是分层结构。根据CSS规范,为开发人员提供可控的滚动体验是引入CSS滚动快照的主要原因之一。它增强了用户体验并使滚动体验更容易实现。滚动容器的基础要创建一个滚动容器,这里是我们需要做的基础使用overflow一种将项目并排显示的方法(内联)例如:项目1

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