CSS Grid 实现左栏固定、右栏滚动的实战技巧

前言

在前端开发中，我们经常需要实现类似于左侧固定、右侧滚动的布局效果。而这种效果的实现方式有很多种，比如使用 JavaScript 实现，使用定位实现等等。但是，这些方式都有其各自的缺点，比如性能问题、兼容性问题等。而 CSS Grid 则提供了一种更加简单、高效的实现方式。

本文将介绍如何使用 CSS Grid 实现左栏固定、右栏滚动的布局效果，并提供详细的示例代码，帮助读者更好地理解和掌握这种实现方式。

实现步骤

实现左栏固定、右栏滚动的布局效果，需要分为以下两个步骤：

1. 创建网格布局
2. 设置左右栏的宽度和位置

创建网格布局

首先，我们需要创建一个网格布局，用于分割页面的左右两部分。网格布局可以使用 display: grid 属性来实现。下面是一个简单的示例：

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

上面的代码表示创建了一个包含两列的网格布局，左侧列的宽度为右侧列宽度的 1/3。

设置左右栏的宽度和位置

接下来，我们需要设置左右栏的宽度和位置，以实现左栏固定、右栏滚动的效果。具体实现方式如下：

// javascriptcn.com 代码示例
.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.left {
  position: sticky;
  top: 0;
  height: 100vh;
}

.right {
  overflow-y: auto;
  height: 100vh;
}

上面的代码中，我们将左侧栏设置为 position: sticky，并将其 top 属性设置为 0，以实现左栏固定的效果。同时，为了让左侧栏占据整个视口的高度，我们将其 height 属性设置为 100vh。

右侧栏则通过设置 overflow-y: auto 来实现滚动效果，并将其 height 属性同样设置为 100vh，以让其占据整个视口的高度。

示例代码

下面是一个完整的示例代码，供读者参考：

// javascriptcn.com 代码示例
<div class="container">
  <div class="left">
    左侧栏
  </div>
  <div class="right">
    右侧栏
    <br>
    ...（省略内容）
    <br>
    右侧栏
  </div>
</div>

// javascriptcn.com 代码示例
.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.left {
  position: sticky;
  top: 0;
  height: 100vh;
}

.right {
  overflow-y: auto;
  height: 100vh;
}

总结

通过使用 CSS Grid，我们可以轻松地实现左栏固定、右栏滚动的布局效果。这种实现方式简单、高效，且兼容性较好，适用于大部分现代浏览器。希望本文能够帮助读者更好地理解和掌握这种实现方式，同时也希望读者能够在实际项目中应用到这种技术，提高开发效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6561c5f8d2f5e1655dbcca1e