当且仅当内容在纯 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伪元素实现这一点：

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>

使用类似的想法作为背景。CCD_ 2和CCD_。而CCD_ 4和CCD_。

---

使用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>