CSS实现滚动阴影效果的小技巧分享

什么是滚动阴影效果？

滚动阴影效果是指在一个滚动容器内，内容滚动时，容器周围产生一种阴影效果。这种效果可以让页面看起来更加动感，同时也可以增加页面的美观度。

.scroll-wrapper {
  box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.1);
}

以上代码将在容器内部和容器外部都添加一层阴影效果，使得内容滚动时，容器的周围都会产生动态的阴影效果。

如何实现滚动阴影效果？

要实现滚动阴影效果，我们可以利用滚动容器的伪元素来实现。我们可以在滚动容器的外部添加一个遮罩容器，然后通过伪元素的方式在容器内部和容器外部添加阴影。代码实现如下：

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.scroll-wrapper {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: auto;
}

.scroll-wrapper::before,
.scroll-wrapper::after {
  position: absolute;
  content: "";
  z-index: -1;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.scroll-wrapper::before {
  top: 0;
  left: 0;
}

.scroll-wrapper::after {
  bottom: 0;
  right: 0;
}

以上代码中，我们首先对HTML和BODY进行了样式重置，在整个页面中占据了100%的宽高。接着，我们在滚动容器内部添加了伪元素，同时为了避免伪元素挡住了容器，我们设置了pointer-events: none，将事件响应转移到容器下面。

使用JavaScript实现动态滚动阴影效果

为了让滚动阴影效果更加动态，我们可以结合JavaScript来实现不同滚动位置对应不同的阴影效果。我们可以通过监听滚动容器的滚动事件，来获取当前滚动位置，然后将滚动位置映射到不同的阴影效果。代码实现如下：

function handleScroll() {
  const scrollTop = this.scrollTop;
  const maxScrollTop = this.scrollHeight - this.clientHeight;
  const progress = scrollTop / maxScrollTop;
  const shadowSize = 20 + progress * 10;
  const shadowSpread = 20 + progress * 10;
  const shadowOpacity = 0.1 + progress * 0.3;
  this.style.boxShadow = \`0px 0px \${shadowSize}px \${shadowSpread}px rgba(0, 0, 0, \${shadowOpacity})\`;
}

const scrollWrapper = document.querySelector('.scroll-wrapper');
scrollWrapper.addEventListener('scroll', handleScroll);

以上代码中，我们首先实现了一个handleScroll函数，用来处理滚动事件。在函数内部，我们首先获取了当前的滚动位置，然后将滚动位置映射到相应的阴影效果。通过设置box-shadow的参数，我们实现了不同滚动位置对应不同的阴影效果。最后，我们将handleScroll函数添加到滚动容器的滚动事件上面，就可以实现动态滚动阴影效果了。