纯CSS滚动阴影

Question

我要求在内容超出可用宽度时启用滚动阴影。我正在尝试使用纯CSS（无JS）实现这一点。我碰到了很多文章，并且可以使用CSS多背景和背景附加实现。如果内容是文本类型，则在下面的jsfilldle代码中可以正常工作，在按钮情况下，背景位于按钮后面。因此，从视觉上讲这是行不通的。

预期的行为：

方案A：应仅在右侧启用阴影，因为滚动条位于最左侧

方案B：应将阴影的左侧和右侧同时启用，因为滚动条位于中间，从左侧移动了一部分

方案C：应仅在左侧启用阴影，因为滚动条位于最右侧。

例如：

/**
 * Scrolling shadows by @kizmarh and @leaverou
 * Only works in browsers supporting background-attachment: local; & CSS gradients
 * Degrades gracefully
 */

html {
  background: white;
  font: 120% sans-serif;
}
.scrollbox {
  overflow: auto;
  width: 200px;
  max-height: 200px;
  margin: 50px auto;
  background:
  /* Shadow covers */
  linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
  /* Shadows */
  radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
  background:
  /* Shadow covers */
  linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
  /* Shadows */
  radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  /* Opera doesn't support this in the shorthand */
  background-attachment: local, local, scroll, scroll;
}

<h1>CSS-only shadow-scrolling effect.</h1>
<div class="scrollbox">
  <ul>
    <li>Ah! Scroll below!</li>
    <li><button>Button</button></li>
    <li><button>Button</button></li>
    <li><button>Button</button></li>
    <li><button>Button</button></li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>The end!</li>
    <li>No shadow there.</li>
  </ul>
</div>

Answer 1

文本也会发生这种情况，但您看不到它，因为它们具有相同的颜色。解决方案是z-index为子级使用比父级更低的值。为此，您还需要另外两件事：

1. A除了孩子和父母position之外static
2. 透明背景.scrollbox

解决方案

.scrollbox li * {
  z-index:0;
  position:relative;
}
.scrollbox {
  z-index:1;
  position:relative;
  background-color:transparent;
}

/**
 * Scrolling shadows by @kizmarh and @leaverou
 * Only works in browsers supporting background-attachment: local; & CSS gradients
 * Degrades gracefully
 */

html {
  background: white;
  font: 120% sans-serif;
}
.scrollbox {
  overflow: auto;
  width: 200px;
  max-height: 160px;
  margin: 5px auto;
  background:
  /* Shadow covers */
  linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
  /* Shadows */
  radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
  background:
  /* Shadow covers */
  linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
  /* Shadows */
  radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  /* Opera doesn't support this in the shorthand */
  background-attachment: local, local, scroll, scroll;
  z-index:1;
  position:relative;
}

.scrollbox li * {
  z-index:0;
  position:relative;
}

<div class="scrollbox">
  <ul>
    <li>Ah! Scroll below!</li>
    <li><button>Button</button></li>
    <li><button>Button</button></li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li><button>Button</button></li>
    <li><button>Button</button></li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>The end!</li>
    <li>No shadow there.</li>
  </ul>
</div>

剩下的唯一问题是您需要纯色背景才能使其工作。

编辑：

子z-index级的 需要低于父级的 ，但是如果您使用负数z-index，就像我建议的那样，单击和悬停等事件将停止工作。我适当地更改了代码。