我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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

你是否经常希望有一个CSS特性可以轻松创建一个可滚动的容器? CSS scroll snap 可以做到这一点。在早期的前端开发中,我依靠 JS 插件来创建滑块组件。有时,我们需要一种简单的方法来快速将元素制作成可滚动的容器。现在,多亏了 CSSS scroll snap ,我们可以简单做到这一点。

为什么要使用 CSS Scroll Snap

随着移动设备和平板设备的兴起,我们需要设计和构建可以轻触的组件。以图库组件为例。用户可以轻松地向左或向右滑动以查看更多图像,而不是分层结构。


根据CSS规范,为开发者提供良好控制的滚动体验是引入 CSS scroll snap的主要原因之一。它增强了用户体验,并使其更容易实现滚动体验。

滚动容器的基础知识

要创建一个滚动容器,以下是我们需要做的基本内容

  • 使用 overflow
  • 一种将项目彼此相邻显示(内联)的方法

举个例子:

  1. "section"
  2.   "section__item">Item 1
 
  •   "section__item">Item 2
  •  
  •   "section__item">Item 3
  •  
  •   "section__item">Item 4
  •  
  •   "section__item">Item 5
  •  
  •  

    1. .section { 
    2.   white-space: nowrap; 
    3.   overflow-x: auto; 

     多年来,使用white-space: nowrap是一种流行的CSS解决方案,用于强制元素保持内联。不过,现在我们基本都使用 Flexbox :

    1. .section { 
    2.   display: flex; 
    3.   overflow-x: auto; 

     

    这是创建滚动容器的基本方法。然而,这还不够,这不是一个可用的滚动容器。

    滚动容器有什么问题

    问题是,与滑动相比,它们并不能提供良好的体验。在触摸屏上滑动手势的主要好处是,我们可以用一根手指水平或垂直滚动。


    实际上需要将每个项目移动到它自己的位置。这并不是滑动,这是一种非常糟糕的体验,通过使用CSS scroll snap,我们可以通过简单地定义snap points来解决这个问题,它将使用户更容易地水平或垂直滚动。

    接着,我们来看看如何使用CSS scroll snap。

    CSS Scroll Snap 简介

    要在容器上使用scroll snap,它的子项目应该内联显示,这可以用我上面解释的方法之一来实现。我选择CSS flexbox:

    1. "section"
    2.   "section__item">Item 1 
    3.   "section__item">Item 2 
    4.   "section__item">Item 3 
    5.   "section__item">Item 4 
    6.   "section__item">Item 5 
    7.  
    1. .section { 
    2.   display: flex; 
    3.   overflow-x: auto; 

    看了这个,我们需要添加另外两个属性来让scroll snap工作。我们应该在哪里添加它们?

    首先,我们需要将scroll-snap-type添加到滚动容器中。在我们的示例中,是.section元素。然后,我们需要向子项(即.section__item)添加scrolln-snap-align。

    1. .section { 
    2.   display: flex; 
    3.   overflow-x: auto; 
    4.   scroll-snap-type: x mandatory; 
    5.  
    6. .section__item { 
    7.   scroll-snap-align: start; 

     这里你可能想知道x mandatory和start是干嘛用的。不用担心,这是本文的核心,下面会对其进行深入的讲解。


    这一刻,我对CSS scroll snap非常兴奋,它使滚动更加自然。现在,让我们深入研究scroll snap 属性。

    Scroll Snap Type

    根据CSS规范,**scroll-snap-type ** 属性定义在滚动容器中的一个临时点(snap point)如何被严格的执行。

    滚动容器的轴线

    滚动容器的轴表示滚动方向,它可以是水平或垂直的,x值表示水平滚动,而y表示垂直滚动。

    1.  
    2. .section { 
    3.   display: flex; 
    4.   overflow-x: auto; 
    5.   scroll-snap-type: x; 
    6.  
    7.  
    8. .section { 
    9.   height: 250px; 
    10.   overflow-y: auto; 
    11.   scroll-snap-type: y; 

     

    Scroll Snap 容器的严格性

    我们不仅可以定义Scroll Snap的方向,还可以定义它的严格程度。这可以通过使用scroll-snap-type值的andatory | proximity来实现。

    mandatory关键字意味着浏览器必须捕捉到每个滚动点。假设roll-snap-align属性有一个start值。这意味着,滚动必须对齐到滚动容器的开始处。

    在下图中,每次用户向右滚动时,浏览器都会将项目捕捉到容器的开头。


    1. .section { 
    2.   display: flex; 
    3.   overflow-x: auto; 
    4.   scroll-snap-type: x mandatory; 
    5.  
    6. .section__item { 
    7.   scroll-snap-align: start; 

      

    试着在下面的演示中向右滚动。如果你使用的是手机或平板电脑,可以向右移动滚动条或使用触摸。应该能感受到每个项目是如何从其容器的开始抓取的。

    演示地址:https://codepen.io/shadeed/pen/RwGaXKB

    但是,如果该值是proximity,则浏览器将完成这项工作,它可能会吸附到定义的点(在我们的例子中start)。注意,proximity 是默认值,但是为了清晰起见,我们这里还是声明一下它。


    1. .section { 
    2.   display: flex; 
    3.   overflow-x: auto; 
    4.    
    5.   scroll-snap-type: x proximity; 

     

    Scroll Snapping Alignment

    滚动容器的子项目需要一个对齐点,它们可以对齐到这个点。我们可以用start, center或end。

    为了更容易理解,下面是它的工作原理。


    假设我们在滚动容器上有一块磁铁,这将有助于我们控制捕捉点。如果scroll-snap-type是垂直的,则对齐对齐将是垂直的。参见下图:


    滚动容器的 start

    子项目将吸附到其水平滚动容器的开始处。


    滚动容器的 center

    子项目将吸附到其滚动容器的中心。


    滚动容器的 end

    子项将对齐到其滚动容器的末尾。


    使用 Scroll-Snap-Stop

    有时,我们可能需要一种方法来防止用户在滚动时意外跳过一些重要的项。如果用户滚动太快,就有可能跳过某些项。

    1. .section__item { 
    2.   scroll-snap-align: start; 
    3.   scroll-snap-stop: normal; 

     无法动太快可能会跳过三个或四个项目,如下所示:


    scroll-snap-stop的默认值是normal,要强制滚动捕捉到每个可能的点,应使用always。

    1. .section__item { 
    2.   scroll-snap-align: start; 
    3.   scroll-snap-stop: always; 

     这样,用户可以一次滚动到一个捕捉点,这种方式有助于避免跳过重要内容。想象每个停止点都有一个停止标志,参见下面的动画:

    演示地址:https://codepen.io/shadeed/pen/JjRbXza

    Scroll Snap Padding

    scroll-padding设置所有侧面的滚动边距,类似于padding属性的工作方式。在下图中,滚动容器的左侧有50px的内边距。结果,子元素将从左侧边缘捕捉到50px


    直滚动也是如此。参见下面的示例:

    1. .section { 
    2.   overflow-y: auto; 
    3.   scroll-snap-type: y mandatory; 
    4.   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 提供更好的滚动体验。


    1. .images-list { 
    2.   display: flex; 
    3.   overflow-x: auto; 
    4.   scroll-snap-type: x; 
    5.   gap: 1rem; 
    6.   -webkit-overflow-scrolling: touch;  
    7.  
    8. .images-list img { 
    9.   scroll-snap-align: start; 

     注意,我使用x作为scroll-snap-type的值。

    事例地址:https://codepen.io/shadeed/pen/jOMrxYO

    好友清单

    滚动捕捉的另一个很好的用例是朋友列表。下面的示例摘自Facebook(一个真实的示例)。


    1. .list { 
    2.   display: flex; 
    3.   overflow-x: auto; 
    4.   scroll-snap-type: x mandatory; 
    5.   gap: 1rem; 
    6.   scroll-padding: 48px; 
    7.   padding-bottom: 32px; 
    8.   -webkit-overflow-scrolling: touch; 
    9.  
    10. .list-item { 
    11.   scroll-snap-align: start; 

     请注意,滚动容器的padding-bottom:32px。这样做的目的是提供额外的空间,以便box-shadow可以按预期显示。


    头像列表

    对于此用例,我感兴趣的是将center作为scroll-snap-align的值。


    1. .list { 
    2.   display: flex; 
    3.   overflow-x: auto; 
    4.   scroll-snap-type: x mandatory; 
    5.   -webkit-overflow-scrolling: touch; 
    6.  
    7. .list-item { 
    8.   scroll-snap-align: center; 

     这在一个角色列表中是很有用的,角色在滚动容器的中间是很重要的


    演示地址:https://codepen.io/shadeed/pen/KKgMJWa

    全屏展示

    使用scroll snap也可以用于垂直滚动,全屏展示就是一个很好的例子。


    1.  
    2.   <section class="section section-1">section
    3.   <section class="section section-2">section
    4.   <section class="section section-3">section
    5.   <section class="section section-4">section
    6.   <section class="section section-5">section
    7.  

    1. main { 
    2.   height: 100vh; 
    3.   overflow-y: auto; 
    4.   scroll-snap-type: y mandatory; 
    5.   -webkit-overflow-scrolling: touch; 
    6.  
    7. .section { 
    8.   height: 100vh; 
    9.   scroll-snap-align: start; 

     

    块和内联

    值得一提的是,对于scroll-snap-type,可以使用inline和block逻辑值。参见下面的示例

    1. main { 
    2.   scroll-snap-type: inline mandatory; 

     可读性

    使用 CSS scroll snap时,请确保可访问性。这是滚动对齐的一种不好用法,它阻止用户自由滚动内容以读取内容。

    1. .wrapper { 
    2.   scroll-snap-type: y mandatory; 
    3.  
    4. h2 { 
    5.   scroll-snap-align: start; 

     


    请务必不要这样做。

    总结

    这是我刚刚学到的一个新的CSS特性的长篇文章。我希望它对你有用。

     

    免责声明:

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    CSS容器优化滚动
    来源:今日头条内容投诉

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

    下载Word文档到电脑,方便收藏和打印~

    下载Word文档

    相关文章

    猜你喜欢

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

    你是否经常希望有一个CSS特性可以轻松创建一个可滚动的容器? CSS scroll snap 可以做到这一点。在早期的前端开发中,我依靠 JS 插件来创建滑块组件。有时,我们需要一种简单的方法来快速将元素制作成可滚动的容器。现在,多亏了 C

    优化多语言内容:使用 CMS 提升用户体验

    使用内容管理系统 (CMS) 优化多语言网站的内容可以显著提升用户体验,让您的网站更具吸引力。通过提供针对不同语言的定制翻译,CMS 能够帮助您与全球受众建立联系。
    优化多语言内容:使用 CMS 提升用户体验
    2024-03-05

    CMS 移动应用支持的性能优化:提升用户体验

    提升 CMS 移动应用支持的性能优化:优化用户体验
    CMS 移动应用支持的性能优化:提升用户体验
    2024-04-03

    SEO优化中如何提升网站用户体验

    这篇文章主要介绍了SEO优化中如何提升网站用户体验,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。第一,时效+速度。网站要想获得用户的青睐在加载速度和内容上就要抓住速度和时效。
    2023-06-10

    PHP性能优化与用户体验:优化性能,提升用户满意度!

    本文主要介绍了PHP性能优化与用户体验之间的关系。通过对PHP程序进行性能优化,可以提高网站的加载速度,减少用户的等待时间,从而提升用户满意度。
    PHP性能优化与用户体验:优化性能,提升用户满意度!
    2024-02-05

    优化dedecms首页布局,提升网站用户体验

    优化dedecms首页布局,提升网站用户体验随着互联网的发展,网站已经成为企业宣传和交流的重要工具。在建设网站的过程中,网站的首页布局是至关重要的,它直接影响到用户对网站的第一印象和使用体验。本文将针对dedecms网站的首页布局进行优化
    优化dedecms首页布局,提升网站用户体验
    2024-03-14

    优化网站性能以提升用户体验的指南

    在如今日益竞争激烈的互联网时代,用户体验已经成为网站成功的关键因素之一。一个流畅、高效的网站能够吸引更多的用户、提升用户满意度,从而促进网站的发展。而网站性能优化就是为了提升用户体验而进行的一系列优化措施。本文将介绍一些提升用户体验的网站性
    优化网站性能以提升用户体验的指南
    2024-02-02

    服务器优化:消除URL中的index.php,提升用户体验

    服务器优化一直是网站优化的重要环节之一,而消除URL中的index.php可以提升用户体验,提高网站的可访问性和SEO效果。本文将介绍如何通过具体的代码示例来实现消除URL中的index.php,从而优化网站服务器。1. 问题背景在很多
    服务器优化:消除URL中的index.php,提升用户体验
    2024-02-29

    优化网站性能和提升用户体验的有效方法

    如何提高网站性能并提升用户体验随着互联网的发展,网站已成为人们获取信息、交流和消费的重要场所。而一个高性能的网站能够给用户带来更好的体验,提升用户粘性,增加访问量和转化率。本文将介绍一些提高网站性能和提升用户体验的方法。一、优化网站的加
    优化网站性能和提升用户体验的有效方法
    2024-02-03

    如何优化PHP图像操作以提升用户界面体验

    PHP图像操作提升用户体验随着互联网的快速发展,图像在网页中的作用越来越重要。对于用户而言,一个清晰、美观的图像可以大大提升他们的浏览体验。然而,由于PHP语言的限制,很多开发者在处理图像时感到困难。本文将介绍如何在PHP中进行有效的图像操作,以提升用户体验。首
    如何优化PHP图像操作以提升用户界面体验
    PHP2024-12-19

    热门标签

    Linux(148)PHP(127)Java(102)正则表达式(101)JavaScript(69)最佳实践(67)jQuery(44)MySQL(39)Docker(37)C语言(36)性能优化(34)Python(34)XML(28)string(27)第三方库(23)回调函数(23)ZIP(22)数组(22)可扩展性(22)字符串比较(21)find(20)RPM(20)Go(20)grep(19)ASP.NETCore(19)XML解析器(19)事件(19)事件处理程序(19)StringBuilder(18)Nginx(18)

    编程热搜

    编程资源站

    目录