Question

由于滚动条通常是不可见的，因此我希望在div可滚动时有一个可视指示器（这适用于移动设备上某些会水平溢出屏幕的东西）

我不确定如何使用CSS实现这一点，然而我记得在几年前的一篇文章中看过这个，所以我认为这是可能的，可能会做什么可能会被描述为“黑客”。或使用相当模糊的财产。

<style>
.scroll-y {
  overflow-y: auto;
}
.scroll-y::overflowing-y { /* not real */
  background: linear-gradient(90deg, transparent 90%, rgba(120,120,120,.4));
}
</style>
<div class="scroll-y"></div>

Answer 1

不，这在CSS中明确且刻意地变得不可能：

https://wiki.csswg.org/faq#selectors-that-depend-on-layout

因为基于<div>的可滚动状态而应用的样式会以一种使<div>足够大而不能滚动的方式影响布局，从而导致无限循环。

Answer 2

Kornel是正确的，一般情况下使用CSS是不可能的，但它可能是伪造的＆＃39;在某些情况下。

This post by Lea Verou 解释了一种使用两个背景的方法，一个用内容滚动，另一个不用，所以当重叠时，它看起来是相同的背景。幻想＆＃39;但是只有在背景颜色是实心的情况下才有效。

以下是Lea的文章中的代码：

.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;
}

还有this Codepen which also contains links to a few related resources。

div可滚动时更改样式

2 个答案: