为什么要使用CSS快速滚动 - 行业资讯 - 肥雀云

　　介绍

小编给大家分享一下为什么要使用CSS快速滚动,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

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

为什么要使用CSS滚动拍

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

<李>

使用<代码>溢出代码

<李>

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

举个例子:

& lt; div 类=皊ection"比; 　　& lt;才能div 类=皊ection__item"祝辞Item 1 & lt;/div> 　　& lt;才能div 类=皊ection__item"祝辞Item 2 & lt;/div> 　　& lt;才能div 类=皊ection__item"祝辞Item 3 & lt;/div> 　　& lt;才能div 类=皊ection__item"祝辞Item 4 & lt;/div> 　　& lt;才能div 类=皊ection__item"祝辞Item 5 & lt;/div> 　　& lt;/div> .section { 　　,,空白:nowrap;} 　　,,overflow-x:汽车; 　　}

多年来,使用<代码>空白:nowrap }是一种流行的CSS解决方案,用于强制元素保持内联。不过,现在我们基本都使用<代码> Flexbox :

.section { 　　,,显示:flex; 　　,,overflow-x:汽车; 　　}

为什么要使用CSS快速滚动”> </p> <p>这是创建滚动容器的基本方法。然而,这还不够,这不是一个可用的滚动容器。</p> <h3>滚动容器有什么问题</h3> <p>问题是,与滑动相比,它们并不能提供良好的体验。在触摸屏上滑动手势的主要好处是,我们可以用一根手指水平或垂直滚动。</p> <p> <img src= & lt; div 类=皊ection"比; 　　& lt;才能div 类=皊ection__item"祝辞Item 1 & lt;/div> 　　& lt;才能div 类=皊ection__item"祝辞Item 2 & lt;/div> 　　& lt;才能div 类=皊ection__item"祝辞Item 3 & lt;/div> 　　& lt;才能div 类=皊ection__item"祝辞Item 4 & lt;/div> 　　& lt;才能div 类=皊ection__item"祝辞Item 5 & lt;/div> 　　& lt;/div> .section { 　　,,显示:flex; 　　,,overflow-x:汽车; 　　}

了这个,我们需要添加另外两个属性来让<强>滚动拍工作。我们应该在哪里添加它们吗?

首先,我们需要将<代码> scroll-snap-type> 。> 。section__item> scrolln-snap-align> .section { 　　,,显示:flex; 　　,,overflow-x:汽车; 　　,,scroll-snap-type: x 强制性; 　　} 　　　　.section__item { 　　scroll-snap-align:,才能开始; 　　}

这里你可能想知道<代码> x强制性和<代码> 是开始干嘛用的。不用担心,这是本文的核心、下面会对其进行深入的讲解。

为什么要使用CSS快速滚动”> <h2 class= 为什么要使用CSS快速滚动