【CSS】スクロール可能な方向を認識させる影

利用規約のコーディングといえば、めっちゃ長い文章を縦スクロールさせるのが通例ですよね。

しっかし、iPhone だとスクロールバーが表示されず、パッと見スクロールできるのかがわかりません…

というわけで、スクロール可能な方向を認識させる影を CSS で表現してみました！

HTML

HTML

<!-- 横スクロール -->
<div class="scrollBox is-horizon">
  <div class="scrollContent"></div>
</div>
scroll-shadow
<!-- 縦スクロール -->
<div class="scrollBox is-vertical">
  <div class="scrollContent"></div>
</div>

CSS

CSS

.scrollBox {
  --background-color-rgb: 255 255 255;
  --shadow-color-rgb: 0 0 0;
  --shadow-size: 50px;
  --shadow-opacity: 0.5;
  height: 500px;
  width: 500px;
  overflow: auto;
}

/* 横スクロール */
.scrollBox.is-horizon {
  overflow: auto;
  background: linear-gradient(
      90deg,
      rgb(var(--background-color-rgb)) 50%,
      rgb(var(--background-color-rgb) / 0)
    ),
    linear-gradient(
        90deg,
        rgb(var(--background-color-rgb) / 0),
        rgb(var(--background-color-rgb)) 50%
      )
      0 100%,
    radial-gradient(
      farthest-side at 0 50%,
      rgb(var(--shadow-color-rgb) / var(--shadow-opacity)),
      transparent
    ),
    radial-gradient(
        farthest-side at 100% 50%,
        rgb(var(--shadow-color-rgb) / var(--shadow-opacity)),
        transparent
      )
      0 100%;
  background-color: rgb(var(--background-color-rgb));
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
  background-position: 0 0, 100%, 0 0, 100%;
  background-size: calc(var(--shadow-size) * 2) 100%,
    calc(var(--shadow-size) * 2) 100%, var(--shadow-size) 100%,
    var(--shadow-size) 100%;
}
.scrollBox.is-horizon .scrollContent {
  width: 300%;
}

/* 縦スクロール */
.scrollBox.is-vertical {
  background: linear-gradient(
      rgb(var(--background-color-rgb)) 50%,
      rgb(var(--background-color-rgb) / 0)
    ),
    linear-gradient(
        rgb(var(--background-color-rgb) / 0),
        rgb(var(--background-color-rgb)) 50%
      )
      0 100%,
    radial-gradient(
      farthest-side at 50% 0,
      rgb(var(--shadow-color-rgb) / var(--shadow-opacity)),
      rgb(var(--background-color-rgb) / 0)
    ),
    radial-gradient(
        farthest-side at 50% 100%,
        rgb(var(--shadow-color-rgb) / var(--shadow-opacity)),
        rgb(var(--background-color-rgb) / 0)
      )
      0 100%;
  background-color: rgb(var(--background-color-rgb));
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
  background-size: 100% calc(var(--shadow-size) * 2),
    100% calc(var(--shadow-size) * 2), 100% var(--shadow-size),
    100% var(--shadow-size);
}
.scrollBox.is-vertical .scrollContent {
  height: 300%;
}

DEMO

See the Pen CSS Scroll Shadow by Takuya Mori (@taqumo) on CodePen.