CSS Sticky 定位结合 Max-Height 实现滚动效果

本文旨在解决在使用 CSS position: sticky 属性时，如何结合 max-height 属性，实现固定定位元素在达到最大高度后出现滚动条，从而保证页面布局的灵活性和可读性。通过示例代码和详细解释，帮助开发者理解并掌握该技巧，优化页面用户体验。

在使用 position: sticky 属性时，如果元素的内容过多，可能会超出屏幕范围，影响页面布局。为了解决这个问题，我们可以结合 max-height 和 overflow-y: auto 属性，使元素在达到最大高度后出现滚动条，从而保证页面布局的完整性和可读性。

实现原理

position: sticky 属性使元素在滚动到特定位置时变为固定定位。max-height 属性限制元素的最大高度，当元素的内容超过最大高度时，overflow-y: auto 属性会在垂直方向上显示滚动条。

立即学习“前端免费学习笔记（深入）”；

示例代码

以下是一个示例代码，展示了如何使用 position: sticky 和 max-height 属性来实现滚动效果：

<div class="mainContainer">   <div class="stickyContainer">     <p>sticky container</p>     <!-- 更多内容 -->   </div>    <div class="scrollable">     <p>scrollable content</p>     <!-- 更多内容 -->   </div> </div>

.mainContainer {   display: flex;   flex-direction: column;   padding: 0 1rem 0 1rem; }  .stickyContainer {   position: sticky;   top: 0;   background: lightgreen;   max-height: 60vh; /* 使用 vh 单位 */   overflow-y: auto; }  .scrollable {   max-width: 100%; }

代码解释

• .stickyContainer：
  • position: sticky;：将元素设置为粘性定位。
  • top: 0;：设置元素在滚动到顶部时固定。
  • max-height: 60vh;：设置元素的最大高度为视口高度的 60%。 使用vh单位是关键，它代表视口高度的百分比，能够更好地适应不同屏幕尺寸。
  • overflow-y: auto;：当内容超出最大高度时，在垂直方向上显示滚动条。
• .scrollable：
  • max-width: 100%;：确保内容宽度不超过容器。

注意事项

• position: sticky 需要父元素具有明确的高度，否则可能无法正常工作。
• max-height 可以使用像素值 (px)、百分比 (%) 或视口单位 (vh)。推荐使用视口单位 (vh)，以便更好地适应不同屏幕尺寸。
• overflow-y: auto 属性只在内容超出 max-height 时才会显示滚动条。

总结

通过结合 position: sticky、max-height 和 overflow-y: auto 属性，我们可以轻松地实现固定定位元素在达到最大高度后出现滚动条的效果，从而优化页面布局和用户体验。在实际开发中，可以根据具体需求调整 max-height 的值，以达到最佳的显示效果。