介绍
在开发网站和Web应用时，经常需要实现滚动视图以浏览长文本、图片和其他内容。在过去，我们需要在HTML和CSS中手动定义滚动视图区域和滚动条，这不仅繁琐，而且难以满足不同设备上的自适应布局要求。使用CSS Grid可以轻松地解决这个问题。
CSS Grid用法回顾
在开始本文之前，让我们简单回顾一下CSS Grid的基本用法。CSS Grid由网格容器（包含网格项目）和网格线组成。网格容器定义了一个网格布局，通常是一个div元素。您可以使用CSS属性display: grid来定义网格容器。每个网格项目由一个或多个单元格组成，每个单元格占据网格行和列中的一定数量单元格（例如，第一行第二列）。您可以通过CSS属性grid-row和grid-column来定义网格项目的位置。
实现固定高度的滚动视图
假设您想要创建一个固定高度的滚动视图来显示长文本。下面是实现此目标的CSS Grid代码：
---- ------------------------------
---- ----------------------------
---------------
----------------
------------------
-----------------
------
---------------------------- - ------- ------ --------- ----- -------- ----- - -------------------- - ---------- - - - - - - -- -------- ----- ------------------- ---- ---- - -------------------- - - ------- -- -
我们首先为网格容器指定一个固定的高度，并设置overflow属性为auto，这将自动添加垂直滚动条。接下来，我们为网格项目（即文本）指定一个单元格，并为网格行设置网格线，使其跨越所有网格列。最后，我们为每个段落元素（p）添加margin: 0，以消除默认的段落间距。
实现自适应高度的滚动视图
如果您想要实现自适应高度的滚动视图，这将需要更多的代码来实现。下面是适用于自适应高度滚动视图的CSS Grid代码：
---- ------------------------------
---- ----------------------------
---------------
----------------
------------------
-----------------
------
---------------------------- - -------- ----- - -------------------- - ---------- - - - - - - -- -------- ----- ------------------- ------------ ------ --------- ----- - -------------------- - - ------- -- -
我们首先使用CSS属性grid-template-rows定义一个自适应网格行，其高度为网格容器的高度。然后我们使用minmax函数为自适应网格行设置一个最小值（100%），以确保网格行至少填满整个网格容器。最后，我们使用overflow属性添加滚动条，并为每个段落元素添加margin: 0。
结论
CSS Grid是一个非常强大的工具，可以帮助您快速构建复杂的Web布局。在本文中，我们介绍了如何使用CSS Grid来实现固定高度和自适应高度的滚动视图。当您需要在Web应用程序中实现滚动视图时，请记得使用CSS Grid，以实现更简洁的代码和更有自信的布局。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6729734b2e7021665e24851d