当前位置：首页 > 编程语言 > 正文内容

解锁CSS滚动快照（Scroll snap），实现直观的网页导航

a811625532年前 (2024-01-09)编程语言15

除了无障碍设计、独特的调色板和迷人的视觉效果之外，您是否想过是什么造就了美好的 *** 体验？那就是流畅的导航。在网页设计的世界里，没有什么功能能比无缝导航更好地为用户提供无懈可击的网页体验了。从简化交互到减少 *** 挫败感，创建易于导航的网站已成为现代 *** 的新潮流。本文将向你展示如何解锁 CSS 的滚动快照 scroll snaps，以产生更好的用户体验。

虽然大多数网站开发人员都认为创建易于浏览的网站令人生畏，但我们希望通过深入了解 CSS 滚动快照的世界并利用它们实现直观的网站导航，让这项任务不再那么可怕。

本教程结束后，你就可以运用滚动快照知识创建无缝滚动的网页，就像下面展示的图片旋转木马一样。

上面的视频介绍了将 scroll snaps 应用于图片旋转木马的概念。通过观察，你会发现滚动是如何以精确的时间间隔停止的，从而在旋转木马中提供平滑、可控的移动。

什么是滚动快照？

Scroll snap（滚动快照）是一种 CSS 功能，它为开发人员提供了控制滚动容器定位的杠杆。当 *** 用户滚动浏览网页时，网页会停在用户停止滚动的位置。然而，利用 CSS 的 scroll snap 功能，网页会在开发人员指定的容器内的特定点停止。这些点被称为卡点，其主要功能是作为滚动容器内的位置，确保滚动在指定位置对齐。通过在网站中使用 scroll snap 功能，网页开发人员可以将滚动容器中的每个元素与特定的快照点关联起来，确保滚动在这些位置结束。

有两个属性与控制网站的滚动行为相关。它们是 scroll-snap-type 和 scroll-snap-align 属性。

Scroll-snap-type 属性

Scroll-snap-type 是一种 CSS 属性，通常在网页的父元素或容器元素中指定，用于定义网页的滚动行为。该属性的语法包含两个值–之一个值代表滚动方向，第二个值定义滚动行为。

语法

.container {
scroll-snap-type: x/y/both none/mandatory/proximity;
}

滚动方向

滚动方向定义了应用 scroll-snap-type 属性的方向。它包含三个可能的值，分别是

  •  X 值： 该值将 scroll-snap-type 属性应用于水平方向。
  •  Y 值： 该值将 scroll-snap-type 属性应用于垂直方向。
  •  Both 值： 该值在水平和垂直方向上应用 scroll-snap-type 属性。

其他可能的滚动方向值包括：

  • Inline 值： 将 scroll-snap-type 属性应用于内联方向。
  • Block 值： 将 scroll-snap-type 属性应用于块方向。

滚动行为

滚动行为定义了应用于网页的 scroll-snap 类型。与滚动方向类似，滚动行为也包含三个值。它们是

  • None 值：这是 scroll-snap-type 属性的默认值，表示在网页上不应用任何滚动行为。
  • Mandatory 值：mandatory 值确保无论用户滚动到哪个位置，元素都会自动滚动到滚动点。这是一个非常严格的 scroll-snap-type 属性值。
  • Proximity 值：proximity 值具有与 mandatory 值类似的功能。不过，它是一种不太严格的 scroll-snap-type 属性值。

Scroll-snap-align 属性

scroll-snap-align 是应用于滚动容器中子元素/子元素的 CSS 属性，它决定了每个项目在特定快照点内的对齐方式。它决定滚动停止时每个容器元素对焦的位置。

语法

.panel {
scroll-snap-align: none/start/center/end;
}

该属性有四种可能的值，它们是：

  • None 值：这是 scroll-snap-align 属性的默认值，表示不对元素应用滚动对齐效果。
  • Start 值：此值用于在元素的起始位置为水平和垂直滚动应用 scroll snap 效果。
  • Center 值：该值在元素中心应用 scroll snap 效果。
  • End值：此值用于在元素结束时为水平和垂直滚动应用 scroll snap 效果。

创建水平和垂直快照点

在探索 scroll snaps 的过程中，我们已经了解了它们的基本属性：scroll-snap-type 和 scroll-snap-align。接下来，我们将把这些知识转化为实际的水平和垂直滚动应用，同时将它们集成到 flexbox 布局和网格容器中。在整个过程中，我们将调整 HTML 和 CSS 文件，以创建引人入胜的产品展示。

一般 HTML 标记

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="2345HAO052f689c2e49df12 container">
<div class="2345HAOee0147aeea4cfc54 panel">
<img src="./im/pexels-terrance-barksdale-10112911.jpg" alt="" />
</div>
<div class="2345HAO47aeea4cfc545ee8 panel">
<img src="./im/icee-dc-PvObYzFkTAE-unsplash.jpg" alt="" />
</div>
<div class="2345HAOea4cfc545ee87065 panel">
<img src="./im/pexels-grailify-8871471.jpg" alt="" />
</div>
<div class="2345HAOfc545ee870654d03 panel">
<img src="./im/chris-henry-tV8yaU09t7w-unsplash.jpg" />
</div>
<div class="2345HAO5ee870654d03eadd panel">
<img src="./im/pexels-jonathan-garcìa-8490975.jpg" alt="" />
</div>
</div>
</body>
</html>

我们的 HTML 标记包含六个 div 标记。之一个是带有 container 类的 div 标签。这个 div 标签是父元素，它包含其余的 div 标签：<div class= "panel"></div> 是其子元素。

效果如下：

上述视频展示了未应用 scroll snap 的网页行为。请注意，当滚动停止时，每个面板都会停止，而不会弹出。

在设置好 HTML 标记后，我们就可以进入 CSS 文件了。

水平滚动的 CSS 标记

我们将在 CSS 标记的 grid 容器中设置水平滚动。为此，我们要将父元素的显示设置为 grid 。代码如下

/*sets the style for the entire webpage, giving the page zero margin and padding*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*sets the background color of the entire webpage to black*/
body {
background: black;
}
/*sets the display of the parent element to grid and sets the scroll-snap-type to x mandatory,
lays the elements of the container over a background image,
sets the margin of the container to auto, thereby placing container element at the center of the webpage*/
.container {
background: url(./im/pexels-terrance-barksdale-10112911.jpg);
display: grid;
grid-template-columns: repeat(5, 100%);
width: 90vw;
height: 90vh;
overflow-x: scroll;
margin: auto;
margin-top: 40px;
scroll-snap-type: x mandatory;
}
/*gives each child element a width of 100% and height of 100vh, while setting the scroll-snap-align property to start*/
.panel {
width: 100%;
height: 100vh;
scroll-snap-align: start;
}
/*gives each image a width and height of 100%*/
.panel img {
width: 100%;
height: 100%;
object-fit: contain;
}

在上述代码中，我们使用 * 语法设置了整个网页的样式。我们将 margin 和 padding 设置为零，将 box-sizing 属性设置为 border box。box-sizing 属性的本质是确保元素在设置 padding 时不会占用额外空间。接下来，我们将网页的背景颜色设置为黑色。

为了实现 scroll snap 功能，我们对 “container” 元素应用样式，将其显示设置为网格。容器的宽度和高度分别为 90vw 和 90vh 。这是为了防止容器元素占满整个屏幕。为了将容器元素置于页面中心，我们将其 margin 设置为 auto， margin-top 设置为 40px 。

对于子元素，我们将其宽度和高度分别设置为 100% 和 100vh。此外，我们还将 scroll-snap-align 属性设置为 start。这样就实现了滚动对齐。

请注意，每张图片的 width 和 height 均为 100%，height 属性设置为  contain。

还要注意的是，overflow-x 属性的值为 scroll，而 scroll-snap-type 属性的值为 x。

效果如下：

在上面的视频中，我们展示了水平 scroll snaps 在产品展示中的应用。每个产品都在其面板中展示，水平 scroll snaps 无缝地引导用户浏览各种产品。

垂直滚动的 CSS 标记

我们将在 CSS 标记的 flex 容器中设置垂直滚动。为此，我们将在父元素中添加一个 flex display，并将子元素的 flex 属性设置为 none。代码如下

/*sets the style for the entire webpage, giving the page zero margin and padding*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*sets the background of the entire webpage*/
body {
background: url(./im/pexels-terrance-barksdale-10112911.jpg);
}
/*sets the display of the parent element to flex and sets the scroll-snap-type to y mandatory*/
.container {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
/*gives each child element a width of 100% and height of 100vh, while setting the scroll-snap-align property to start*/
.panel {
flex: none;
width: 100%;
height: 100vh;
scroll-snap-align: start;
}
/*gives each image a width of 100% and height of 90%*/
.panel img {
margin-top: 40px;
width: 100%;
height: 90%;
object-fit: contain;
}

与水平滚动类似，我们使用 * 语法为垂直滚动设置整个网页的样式。我们将 margin 和 padding 设置为零，将 box-sizing 属性设置为 border box。

接下来，我们将对 “container” 元素应用样式，并将其显示设置为 flex，从而在网页上实现 scroll snap 功能。容器的宽度和高度分别为 100% 和 100vh。我们还将 overflow-y 属性设置为 scroll。此功能可实现垂直滚动。为了实现滚动快照，我们将 scroll-snap-type 设置为  y mandatory。

对于子元素，我们将其宽度和高度分别设置为 100% 和 100vh。此外，我们还将 scroll-snap-align 属性设置为 start。

请注意，每张图片的 width 和 height 分别为 100% 和 90%，object-fit 属性设置为 contain。

效果如下：

在上述视频中，我们在产品展示中使用了垂直  scroll snaps 。目录中的每个项目都按垂直顺序排列，并在其垂直面板中清晰呈现。垂直 scroll snap 创建了一种引导式导航体验，让用户能够以可控的方式流畅地滚动浏览产品系列。

高级滚动快照技术

到目前为止，我们已经在 flexbox 布局和 grid 容器中设置了水平和垂直滚动，确保了流畅的滚动体验。不过，我们还可以进一步添加特定属性，帮助微调滚动行为，增强用户的 *** 体验。这些属性就是 scroll-padding 和 scroll-margin。

Scroll-padding 属性

scroll-padding 属性允许控制滚动容器内的间距。这意味着，当用户滚动页面时，如果移动停止，页面会迅速调整，在容器与焦点子元素的快照位置之间的指定距离处停止。

语法

.container {
scroll-padding: 50px;
}

Scroll-padding 的语法与常规 padding 属性类似，是其他四个属性的简称，它们是

  • Scroll-padding-top:：该属性控制滚动容器顶部的间距。
  • Scroll-padding-bottom：该属性控制滚动容器底部的间距。
  • Scroll-padding-left：该属性控制滚动条左侧的间距。
  • Scroll-padding-right：该属性控制滚动条容器右侧的间距。

要有效实现滚动加载，必须在子元素上设置 scroll-snap-align 属性，而 scroll-padding 和 scroll-snap-type 属性必须放在父元素上。

Scroll-margin 属性

scroll-margin 属性是控制快照位置和滚动容器边缘之间空间的功能。这意味着一旦停止滚动，滚动就会调整并停止在快照位置和容器之间的指定距离。

Syntax

.panel {
scroll-margin: 50px;
}

Scroll-margin 属性是其他四个值的速记属性。它们是

  • Scroll-margin-top：设置快照位置与滚动容器顶部之间的边距。
  • Scroll-margin-bottom：设置快照位置与滚动容器底部之间的边距。
  • Scroll-margin-left：设置快照位置与滚动框左侧之间的边距。
  • Scroll-margin-right：设置快照位置与滚动容器右侧之间的边距。

要有效应用 scroll-margin 属性，必须在子元素上设置 scroll-margin 和 scroll-align 属性，而 scroll-snap-type 属性必须在父元素上设置。

CSS 滚动快照的实际应用

到目前为止，毫无疑问，CSS 滚动快照是每个现代网站不可或缺的强大功能，因为它能提供平滑、可控的滚动行为，从而改善用户体验。下面，我们将深入探讨 CSS 滚动快照在现实世界中的一些应用。

  • 图片库和旋转木马：图片库和旋转木马利用 CSS 滚动快照提供流畅且具有视觉吸引力的浏览体验。当用户滚动浏览图片集时，在该功能的帮助下，每张图片都会与视口保持一致，从而实现无缝过渡。这可进一步确保用户将注意力集中在单张图片上，而不会被部分视图分散注意力。
  • 响应式网页设计：CSS 滚动快照的另一个出色应用是创建响应式网页设计。当用户浏览网站时，滚动咬合可确保各部分整齐地咬合到视图中，并与视口保持一致。这样，无论是在智能手机、平板电脑还是台式机上，都能保证布局的一致性和视觉美感。
  • 交互式地图：在交互式地图中，CSS 滚动快照功能使地图生动活泼，引导用户在虚拟旅程中浏览多个地点。当用户浏览地图时，该功能可使地图平滑过渡到兴趣点，提供独特的探索体验。
  • 产品展示：电子商务网站利用滚动快照的强大功能，以井然有序的格式展示其产品。当用户滚动浏览产品目录时，每件产品都能与视口完美对齐，让客户能够专注于单个产品，同时避免分心。

小结

CSS 滚动快照为创建无缝导航网站提供了一种前景广阔的 *** 。通过定义快照点，开发人员可以改善用户体验，使滚动更加流畅，减少挫败感。无论是应用于创建图片库还是交互式地图，CSS 滚动快照功能都能无缝地改善用户导航，从而创造出更身临其境、更完美的 *** 体验。

扫描二维码推送至手机访问。

版权声明：本文由2345好导航站长资讯发布，如需转载请注明出处。

本文链接：http://2345hao.cn/blog/index.php/post/8170.html

分享给朋友：
返回列表

上一篇：如何成为一名合格的前端开发工程师？

下一篇：Node.js和WordPress：为自定义应用程序构建动态API

“解锁CSS滚动快照（Scroll snap），实现直观的网页导航” 的相关文章

什么是JavaScript？网络上最流行的脚本语言一瞥

什么是JavaScript？网络上最流行的脚本语言一瞥

谁在尝试访问某些网站时没有遇到过更新Java的请求？ 虽然许多人通过交互式网站功能熟悉Java，但用户可能不太熟悉JavaScript——或者，实际上，他们可能错误地认为两者是相同的。 在本文中，我们将讨论JavaScript 是什么以及Java和JavaScript之间的区别。然后我们将概...

宝塔面板教程之监控管理篇

宝塔面板教程之监控管理篇

宝塔面板另外一个特质是，你无需通过Linux命令行来查看服务器各项指标状况，即可以阿里云服务器类似的可视化图表，查看资源使用、负载、CPU占用及内容使用百分比等指标。 默认监控是关闭，有需要的，可以开启，监控数据默认保存30天，可以自行修改，默认监控数据保存在日志，可手动清理该日志。 监控管理，...

宝塔面板教程之安全管理篇

宝塔面板教程之安全管理篇

宝塔面板的安全管理可以设置SSH开关、禁用PING、放行端口、屏蔽IP等相关的操作。 SSH的设置 SSH的关闭与启动，点击下图的开关，即可开启或关闭SSH远程连接。 SSH端口的修改，SSH远程连接的默认端口为22，修改端口前，请先查看该端口是否被占用。 PING命令的...

15种最佳编程字体以帮助您更愉悦地敲代码

15种最佳编程字体以帮助您更愉悦地敲代码

经过几个小时的努力工作后，您是否感到眼睛疲劳或难以阅读代码？许多程序员在开始头疼之前从没想过要切换字体。 如果您经常发现在尝试扫描一千行代码时眼睛模糊不清，或者在停止编码数小时后头疼，那么可能是时候尝试一种新字体了。即使您没有遇到这些症状，设计良好的字体通常也比默认系统字体具有更好的可读性。...

20个最佳Laravel免费和付费教程资源

20个最佳Laravel免费和付费教程资源

Laravel多年来一直是PHP应用程序开发的摇滚明星，这是有充分理由的。庞大的生态系统、活跃的社区、强大的就业市场、成功的初创公司——它拥有一切让采用新技术变得值得的东西。 如果你想学习Laravel，你不需要更进一步。通过浏览本指南，您可以找到最适合您的Laravel教程，与您的知识水平和...

优化Laravel性能的17种方法

优化Laravel性能的17种方法

您是否正在寻找成功的方法来加快Laravel的性能，同时在您的项目上工作？你来对地方了！ Laravel是一个流行的开源PHP框架，以其强大的安全性和简单而复杂的编码架构而闻名。它是构建能够推动收入和推动业务发展的尖端Web应用程序的绝佳选择。 尽管如此，如果你不使用正确的优化技术，Lara...

Copyright 2345hao.cn Rights Reserved.琼ICP备2025061540号-1

Powered By Z-BlogPHP. Theme by TOYEAN.

您是本站第467526名访客 今日有16篇新文章/评论