CSSだけで部分スクロール

スペック表などの横長コンテンツを部分スクロールさせるようCSSだけで設定できます。

-webkit-overflow-scrolling: touch;

慣性スクロールあり

TYPE A TYPE B TYPE C TYPE D TYPE E TYPE F
option 1 v v v v v v
option 2 v - v - v -
option 3 v v - - - -

-webkit-overflow-scrolling: auto;

慣性スクロールなし

TYPE A TYPE B TYPE C TYPE D TYPE E TYPE F
option 1 v v v v v v
option 2 v - v - v -
option 3 v v - - - -

縦の部分スクロール

-webkit-overflow-scrollingを設定した要素へ高さを指定すると、利用規約などでよく見る縦方向の部分スクロールもできます。

  1. headline
    • line A
    • line B
    • line C
    • line D
    • line E
  2. headline
    • line A
    • line B
    • line C
    • line D
    • line E
  3. headline
    • line A
    • line B
    • line C
    • line D
    • line E
  4. headline
    • line A
    • line B
    • line C
    • line D
    • line E
  5. headline
    • line A
    • line B
    • line C
    • line D
    • line E