CSS 如何在滚动时只在需要时添加顶部和底部的阴影

在本文中，我们将介绍如何使用CSS实现在滚动时只在需要时添加顶部和底部的阴影效果。

阅读更多：CSS 教程

实现顶部和底部的阴影效果

要实现在滚动时只在需要时添加顶部和底部的阴影效果，我们可以使用CSS的伪元素和滚动事件来实现。首先，我们需要创建一个具有滚动内容的容器，并给它一个固定的高度和宽度。例如：

.container {
  width: 100%;
  height: 400px;
  overflow-y: auto;
  position: relative;
}

在容器内部创建滚动内容：

<div class="container">
  <div class="content">
    <!-- 内容 -->
  </div>
</div>

接下来，我们可以使用伪元素来创建阴影。我们将使用:before和:after伪元素作为容器的第一个子元素和最后一个子元素，来创建顶部和底部的阴影。例如：

.container:before,
.container:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.2s ease;
}

.container:before {
  top: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.container:after {
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

在上述代码中，我们设置了阴影的样式。通过改变透明度，我们可以控制阴影的显示和隐藏。在初始状态下，我们将阴影的透明度设置为0，以确保它们在页面加载时不可见。

最后，在滚动容器上添加滚动事件处理程序，以便在滚动时控制阴影的出现和隐藏。例如：

const container = document.querySelector('.container');

container.addEventListener('scroll', function() {
  const scrollTop = container.scrollTop;
  const scrollHeight = container.scrollHeight;
  const clientHeight = container.clientHeight;

  const topShadow = document.querySelector('.container:before');
  const bottomShadow = document.querySelector('.container:after');

  if (scrollTop === 0) {
    topShadow.style.opacity = 0;
  } else {
    topShadow.style.opacity = 1;
  }

  if (scrollTop + clientHeight === scrollHeight) {
    bottomShadow.style.opacity = 0;
  } else {
    bottomShadow.style.opacity = 1;
  }
});

在代码中，我们获取滚动容器的滚动位置、内容高度和可见区域高度。然后，我们通过检查滚动位置是否在顶部或底部来决定阴影的显示和隐藏。

示例演示

为了更好地理解上述实现步骤，我们提供了一个完整的示例演示。你可以在下面的代码中复制粘贴，并在浏览器中运行，以查看效果：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 300px;
      height: 200px;
      overflow-y: auto;
      position: relative;
      border: 1px solid #000;
    }

    .container:before,
    .container:after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 20px;
      pointer-events: none;
      z-index: 1;
      transition: opacity 0.2s ease;
    }

    .container:before {
      top: 0;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    }

    .container:after {
      bottom: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="content">
      <!-- 这里添加你的实际内容 -->
    </div>
  </div>

  <script>
    const container = document.querySelector('.container');

    container.addEventListener('scroll', function() {
      const scrollTop = container.scrollTop;
      const scrollHeight = container.scrollHeight;
      const clientHeight = container.clientHeight;

      const topShadow = document.querySelector('.container:before');
      const bottomShadow = document.querySelector('.container:after');

      if (scrollTop === 0) {
        topShadow.style.opacity = 0;
      } else {
        topShadow.style.opacity = 1;
      }

      if (scrollTop + clientHeight === scrollHeight) {
        bottomShadow.style.opacity = 0;
      } else {
        bottomShadow.style.opacity = 1;
      }
    });
  </script>
</body>
</html>

你可以将实际内容添加到容器的content部分。运行示例演示后，试着滚动查看效果。