概要
テーブルのスクロール可能領域を視覚的に示すために、水平スクロール時に影を付ける手法が存在する。
これまでの方法だと、スクロール可能領域の端に影を付けるためにJavaScriptを使用してスクロール位置に応じて影の位置を調整したり、そのためにラッパー要素を用意するなどして実装が複雑になるような手法が主だった。
JavaScriptやラッパー要素を用いず、テーブル要素に対してCSSだけでスクロール可能領域を表す影を付ける実装をする。既存のHTML構造を変更せずに実現できるため、汎用性が高くなる。
実現方法
デモ
コード
:root {
--table-shadow-color: hsla(0, 0%, 87%, 0.9);
--table-shadow-size: 0.5rem;
--table-shadow-spread: calc(var(--table-shadow-size) * -0.5);
}
@keyframes scroll-table-shadow-inset {
0% {
box-shadow:
inset calc(var(--table-shadow-size) * -2) 0 var(--table-shadow-size) var(--table-shadow-spread)
var(--table-shadow-color),
inset 0 0 var(--table-shadow-size) var(--table-shadow-spread) var(--table-shadow-color);
}
10%,
90% {
box-shadow:
inset calc(var(--table-shadow-size) * -1) 0 var(--table-shadow-size) var(--table-shadow-spread)
var(--table-shadow-color),
inset var(--table-shadow-size) 0 var(--table-shadow-size) var(--table-shadow-spread) var(--table-shadow-color);
}
100% {
box-shadow:
inset 0 0 var(--table-shadow-size) var(--table-shadow-spread) var(--table-shadow-color),
inset calc(var(--table-shadow-size) * 2) 0 var(--table-shadow-size) var(--table-shadow-spread)
var(--table-shadow-color);
}
}
table {
display: block; /* テーブルの内側をスクロール用 */
overflow-x: auto; /* テーブルの内側をスクロール用 */
max-width: 100%; /* テーブルの内側をスクロール用 */
animation: scroll-table-shadow-inset linear; /* 影のアニメーション */
animation-timeline: scroll(self x); /* スクロール連動 */
}