フロントのエンド

Web開発をがんばりたいブログ

CSS

スマホでよく見る感じの横スクロールなアレコレはCSSだけでやってまう

by:
17/04/18

カルーセル系のjQueryプラグインを入れるのもまあ悪くはないと思うけども、CSSだけでやってしまってもよいのではないかね?

HTML的には親子のdivになってるだけ。

親(.slide-wrap)に対して

.slide-wrap {
  overflow-y: hidden;
  overflow-x: scroll;
}

overflow-x: scroll;で横スクロールを許可。

.slide-wrap {
  display: flex;
}

display: flex;で子要素を横並び

.slide-wrap {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

慣性スクロールするように調整。スマホでこれがないとキツい。

後は子要素(.side-box)の幅をいい感じに調整する。

.side-box {
  flex: 0 0 88%;
  padding: 0 8px;
  }

floatやtable-cellでも同じことは出来るけども、なんというか、Flexboxでいかせて欲しいよね。

Flexboxのブラウザサポートはと言えば

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.

IE9はあかん感じやけどもEdge先生はいける感じなんで、Flexboxもう使っていい事にしようよ。

ねえ。

Can I Use のブラウザ対応表をサイトに埋め込む – フロントのエンド

コメントを残す