CSS Div 淡化滚动样式

Question

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

Answer 1

您可以通过以下方式实现此效果： CSS:

ol {
  border: 1px #d8d8d8 dashed;
  font: 2em/1.6em Arial;
  position: relative;
}

ol:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1) 90%);
  width: 100%;
  height: 4em;
}

HTML:

<ol>
  <li>item1 - test</li>
  <li>item2 - test</li>
  <li>item3 - test</li>
  <li>item4 - test</li>
  <li>item5 - test</li>
</ol>

你会得到低于输出...

Answer 2

您可以使用 CSS mask-image for browsers that support it (which is pretty common nowadays)。根据您的需要，可能需要 JS（例如，如果您想要根据用户是否滚动到元素的 top/bottom 有条件地切换淡入淡出）。

要创建“底部淡出”效果，您可以使用以下 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%);

现在你问：我们如何隐藏面具？简单：如果色标之间的间距为 0px，则蒙版将始终为黑色，从而完全看穿它。

JS 部分只是使用 classes 简单地切换这些色标。我们使用 CSS 可以被 adding/removing a class 覆盖的自定义属性。 JS 用于嗅探滚动位置并切换这些 classes。请参阅下面的 proof-of-concept：

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)
  const isScrolledToBottom = el.scrollHeight <= el.clientHeight + el.scrollTop;
  const isScroledlToTop = el.scrollTop === 0;
  el.classList.toggle('is-bottom-overflowing', !isScrolledToBottom);
  el.classList.toggle('is-top-overflowing', !isScroledlToTop);
}

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

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

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #2a9d8f;
  font-family: Arial, sans-serif;
}

.box {
  width: 50vw;
  height: 90vh;
  background-color: #fff;
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}

.box h1 {
  margin: 0;
}

#content {
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black var(--top-mask-size, 0), black calc(100% - var(--bottom-mask-size, 0)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, black var(--top-mask-size, 0), black calc(100% - var(--bottom-mask-size, 0)), transparent 100%);
}

#content.is-top-overflowing {
  --top-mask-size: 48px;
}

#content.is-bottom-overflowing {
  --bottom-mask-size: 48px;
}

<article class="box">
  <h1>Lorem ipsum</h1>
  <section id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel metus at tellus consectetur rhoncus. Aenean euismod eget mauris cursus tincidunt. Cras lectus dolor, suscipit nec porttitor a, tincidunt vel arcu. Etiam facilisis faucibus lectus
      vitae pharetra. Fusce euismod lacus sit amet consequat mattis. Aliquam suscipit metus a nulla suscipit varius. In tempor suscipit pretium.</p>
    <p>Vivamus aliquam eros eu orci finibus, id efficitur lorem placerat. Sed congue ipsum quis accumsan feugiat. Nunc imperdiet faucibus tellus, nec tincidunt ipsum dictum non. Quisque dui lacus, bibendum vitae lectus vel, vulputate tempus quam. Praesent
      ullamcorper ultricies felis, at fermentum massa gravida quis. Pellentesque mollis, urna sed vehicula elementum, dolor lorem congue ipsum, eget ullamcorper ex arcu nec mi. Suspendisse potenti. Morbi pharetra eu nisi quis laoreet. Donec ut quam id
      justo pulvinar volutpat eget ut magna.</p>
    <p>Etiam aliquam eleifend dignissim. Donec sagittis tincidunt quam, eget venenatis mi sollicitudin et. Vestibulum id lectus mi. Aenean enim sem, viverra at velit ut, posuere dapibus tellus. Ut accumsan mi eu lectus sollicitudin ornare. Morbi eu semper
      lacus. Aenean id erat at nulla ornare consequat a at leo. In risus risus, blandit sit amet tortor sed, accumsan porttitor velit. Quisque interdum id ipsum quis convallis. Suspendisse vel pretium augue. Sed tincidunt, felis ut porta consectetur,
      mauris urna hendrerit diam, nec aliquet augue ante quis metus.</p>
  </section>
</article>

CSS Div 淡化滚动样式

CSS Div Fade Scroll Styling

html

css

scroll

styling