当且仅当内容在纯 CSS 中溢出时，如何显示 "Scroll down!"？

Question

我能找到的最接近的（纯 CSS）是这样的：

https://lea.verou.me/2012/04/background-attachment-local/

... 可能不再是最新的。我开始怀疑这在 CSS 中是否可行。这是 Lea Verou 的代码：

/**
 * 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;
}

不仅当且仅当内容溢出时才会显示阴影。此外，一旦您一直滚动到底部（或分别滚动到顶部），阴影就会消失。

但是是否可以利用 background-attachment: local 来控制其他 DOM 元素的显示、可见性或不透明度属性？

Answer 1

您可以使用 CSS pseudo elements:

ul {
  margin: 0px;
}

.scrollbox {
  overflow: auto;
  float: left;
  width: 200px;
  height: 150px;
  margin: 0px 20px;
  font-size: 16px;
  background: /* Shadow covers */
  /* top */
  linear-gradient(white 30%, transparent), /* bottom */
  linear-gradient(transparent, white 70%) 0 100%, /* Shadows */
  radial-gradient(farthest-side at 50% 0, rgba(63, 185, 6, 0.5), transparent), radial-gradient(farthest-side at 50% 100%, rgba(63, 185, 6, 0.5), transparent) 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;
  position: relative;
  border: 1px solid gray;
}

.scrollbox::before {
  content: "scroll up";
  display: block;
  width: 100%;
  position: sticky;
  top: 0;
  text-align: center;
  font-size: 0.5rem;
  height: 0.6rem;
}

.scrollbox::after {
  content: "scroll down";
  display: block;
  width: 100%;
  position: sticky;
  bottom: 0;
  text-align: center;
  font-size: 0.5rem;
  height: 0.6rem;
}

ul::before {
  content: "";
  width: 50%;
  background-color: white;
  position: absolute;
  top: 0;
  z-index: 100;
  height: 0.6rem;
}

ul::after {
  content: "";
  width: 100%;
  background-color: white;
  position: absolute;
  left: 0;
  z-index: 100;
  height: 0.6rem;
}

<div class="scrollbox">
  <ul>
    <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>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>
  </ul>
</div>
<div class="scrollbox">
  <ul>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

使用类似的想法作为背景。 scrollbox::before 和 scrollbox::after 元素显示上下文本。 ul::before 和 ul::after 将它们隐藏在顶部和底部。

使用 SVG： 我们可以在背景中使用 SVG 而不是渐变：

ul {
  margin: 0px;
}

.scrollbox {
  overflow: auto;
  width: 200px;
  height: 200px;
  margin: 0px 10px;
  background: /* Shadow covers */
  /* top */
  linear-gradient(white 30%, transparent), /* bottom */
  linear-gradient(transparent, white 70%) 0 100%, /* Shadows */
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='1rem' width='200px'><text x='50%' y='10' fill='green' font-size='0.7rem' text-align='center'>scroll up</text></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='1rem' width='200px'><text x='50%' y='10' fill='green' font-size='0.7rem' text-align='center'>scroll down</text></svg>") 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;
  border: 1px solid gray;
  float: left;
}

<div class="scrollbox">
  <ul>
    <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>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>
  </ul>
</div>
<div class="scrollbox">
  <ul>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

当且仅当内容在纯 CSS 中溢出时，如何显示 "Scroll down!"？

How to display "Scroll down!" if and only if content overflows in pure CSS?

css

scroll

background