【CSS】スマホのタッチスライドをCSSだけで作る overflow-scrolling

こんな感じのhtmlとcss

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="sliderBox">
  <div class="slider">
    <div class="innerBox">
      <img src="img_sample.jpg" alt="" />
      <p>テキストテキスト</p>
    </div>
    <div class="innerBox">
      <img src="img_sample.jpg" alt="" />
      <p>テキストテキスト</p>
    </div>
    <div class="innerBox">
      <img src="img_sample.jpg" alt="" />
      <p>テキストテキスト</p>
    </div>
    <div class="innerBox">
      <img src="img_sample.jpg" alt="" />
      <p>テキストテキスト</p>
    </div>
    <div class="innerBox">
      <img src="img_sample.jpg" alt="" />
      <p>テキストテキスト</p>
    </div>
  </div>
</div>

以下のようになります。とってもシンプル！

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.sliderBox {
  width: 100%;
  padding: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
  border:1px solid #000;
}
 
.slider {
  width: 750px;
  overflow-scrolling: touch;
  -webkit-overflow-scrolling: touch;
}
 
.sliderBox::-webkit-scrollbar {
  display: none;
  height: 0 !important;
}
 
.innerBox {
  float: left;
  width: 130px;
  margin: 0 0 0 5px;
  background: #EFEFEF;
}
 
.innerBox:first-child {
  margin: 0;
}
 
.innerBox p{
  text-align:center;
  font-size:12px;
  padding:5px;
}
 
.innerBox img {
  width: 100%;
}

テキストテキスト

テキストテキスト

テキストテキスト

テキストテキスト

テキストテキスト

スマホで見るとスクロールできるのが確認ができます。
-webkit-overflow-scrolling: touch; これを入れるとタッチスクロールが出来るようになるみたいです。
スクロールバーの見た目をカスタマイズするのに::-webkit-scrollbarでスタイルを指定します。
シンプルで簡単だからスマホのサイトでは重宝しそう！

コメントを残す