纯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低于父母的position。为此，您需要另外两件事：

1. 除static以外的.scrollbox代表孩子和父母
2. .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: 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: 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;
}

＆＃13;
＆＃13;
<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>
＆＃13;
z-index
＆＃13;
＆＃13;
＆＃13;

剩下的唯一问题是你需要一个坚实的背景颜色才能发挥作用。

编辑：

孩子的z-index需要低于父母的<base>/build/pack/，但如果你使用负lib/，就像我建议的那样，点击和悬停等事件就会停止工作。我正确地更改了代码。