CSS Div 淡入淡出滚动样式

Question

我似乎无法弄清楚如何设计如下图所示的可滚动 div 的样式。我发现的教程和示例都将 div 淡出为背景颜色，但我找不到这样的，有人有解决方案吗？不需要有下面的内部 div 和标题，只需要保持白框不褪色，谢谢！

Answer 1

您可以在支持 CSS 的浏览器上使用 CSS mask-image（这在当今很常见）。根据您的需求，可能需要 JS（例如，如果您想根据用户是否滚动到元素的最顶部/底部来有条件地切换淡入淡出）。

要创建“底部淡出”效果，您可以使用以下 CSS 规则：

mask-image: linear-gradient(to bottom, black calc(100% - 48px), transparent 100%);

它基本上说：

• 创建从顶部到底部的线性渐变
• 当我们距离底部48px时，开始将颜色从黑色（遮罩时看穿）更改为透明（遮罩时不透明）

然而，这只会创建底部渐变。要遮盖顶部和底部，您需要将两个渐变合并为一个：

mask-image: linear-gradient(to bottom, transparent 0%, black 48px, black calc(100% - 48px), transparent 100%);

现在你问：我们如何隐藏面具？简单：如果色标间隔 0 像素，则遮罩将始终为黑色，这将使其完全透明。

JS 部分只是使用类切换这些颜色停止点。我们使用 CSS 自定义属性，可以通过添加/删除类来覆盖这些属性。JS 用于嗅探滚动位置并切换这些类。请参阅下面的概念验证：

mask-image: linear-gradient(to bottom, black calc(100% - 48px), transparent 100%);

mask-image: linear-gradient(to bottom, transparent 0%, black 48px, black calc(100% - 48px), transparent 100%);

function setClasses(el) {
  const isScrollable = el.scrollHeight > el.clientHeight;
  
  // GUARD: If element is not scrollable, remove all classes
  if (!isScrollable) {
    el.classList.remove('is-bottom-overflowing', 'is-top-overflowing');
    return;
  }
  
  // Otherwise, the element is overflowing!
  // Now we just need to find out which direction it is overflowing to (can be both).
  // One pixel is added to the height to account for non-integer heights.
  const isScrolledToBottom = el.scrollHeight < el.clientHeight + el.scrollTop + 1;
  const isScrolledToTop = isScrolledToBottom ? false : el.scrollTop === 0;
  el.classList.toggle('is-bottom-overflowing', !isScrolledToBottom);
  el.classList.toggle('is-top-overflowing', !isScrolledToTop);
}

document.querySelector('#content').addEventListener('scroll', (e) => {
  const el = e.currentTarget;
  setClasses(el);
});

setClasses(document.querySelector('#content'));