HOME > 開発者向けBLOG > JavaScript >  スマートフォンで部分横スクロール

Technology Note 開発者向けBLOG

JavaScript

スマートフォンで部分横スクロール

こんにちは、ゼノフィ渡部です。

スマートフォンで横スクロールバーを出しつつ、横スクロールする方法をご紹介いたします。

通常、Androidではスクロールバーを出すことはできません。iOSに関しては、iOS5以上ですが「-webkit-overflow-scrolling: touch;」により一本指でスクロールさせることができます。ここでは「iscroll.js」を使うことによって、AndroidとiOSで同じ動きを実現させます。

まず、元となる「jquery.js」と「iscroll.js」をダウンロードして、読み込みます。

1
2

<script type="text/javascript" src="jquery1.7.1.js"></script>
<script type="text/javascript" src="iscroll.js"></script>

下のソースのポイントは「onBeforeScrollStart: function(){}」です。「iscroll.js」はデフォルトで「onBeforeScrollStart: function (e) { e.preventDefault(); },」として、スクロール領域以外でのブラウザのスクロール挙動を止めています。「onBeforeScrollStart: function(){}」と記述して上書きすることで、タッチ操作によるスクロール領域からの画面全体の縦スクロールを有効にしています。

横スクロールする領域の決定は「$(“.scroll_x”)」で、「.scroll_x」というクラスから判定しています。

下記スクリプトはHTMLファイルに直接（<script type="text/javascript"></script>内に）記述しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(document).ready(function () {
 
    var element = $(".scroll_x")[0];
 
    var scroll_x = new iScroll(element, {
 
        // スクロールバーを常時表示
        hideScrollbar: false,
 
        // 慣性スクロール禁止
        bounce: false,
 
        // スクロール領域からの画面全体の縦スクロールを有効に
        onBeforeScrollStart: function(){}
 
    });
 
});

下記スタイルの「.scroll_x」の「position: relative;」で横スクロールバーの表示位置を要素からの相対位置に指定し、「padding: 0 0 15px;」で微調整をしています。

1
2
3
4
5

/* 要素からの相対位置 */
.scroll_x {
  position: relative;
  padding: 0 0 15px;
}

横スクロールする条件は、親要素の幅を子要素が上回る時に起きます。横スクロールする要素のテーブルには「900px」といった感じで、親要素の横幅を超える値を指定します。 

1
2
3

table {
  width: 900px;
}

サンプルはスマートフォンで確認ができます。テーブルを左右にスワイプすると横にスクロールします。

サンプル

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(document).ready(function () {
 
    var element = $(".scroll_x")[0];
 
    var scroll_x = new iScroll(element, {
 
        // スクロールバーを常時表示
        hideScrollbar: false,
 
        // 慣性スクロール禁止
        bounce: false,
 
        // スクロール領域からの画面全体の縦スクロールを有効に
        onBeforeScrollStart: function(){}
 
    });
 
});

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

body {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}
 
/* 要素からの相対位置 */
.scroll_x {
  position: relative;
  padding: 0 0 15px;
}
 
/* テーブル */
table {
  width: 900px;
  border-top: 1px solid #CCC;
  border-left: 1px solid #CCC;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
 
table th,
table td {
  padding: 2px;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}
 
table th {
  background: #EEF1F4;
}

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
<title>
    スマートフォンで部分横スクロール
</title>
 
<script type="text/javascript" src="jquery1.7.1.js"></script>
<script type="text/javascript" src="iscroll.js"></script>
 
<script type="text/javascript">
 
$(document).ready(function () {
 
    var element = $(".scroll_x")[0];
 
    var scroll_x = new iScroll(element, {
 
        // スクロールバーを常時表示
        hideScrollbar: false,
 
        // 慣性スクロール禁止
        bounce: false,
 
        // スクロール領域からの画面全体の縦スクロールを有効に
        onBeforeScrollStart: function(){}
 
    });
 
});
 
</script>
 
<style type="text/css">
 
body {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}
 
/* 要素からの相対位置 */
.scroll_x {
  position: relative;
  padding: 0 0 15px;
}
 
/* テーブル */
table {
  width: 900px;
  border-top: 1px solid #CCC;
  border-left: 1px solid #CCC;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
 
table th,
table td {
  padding: 2px;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}
 
table th {
  background: #EEF1F4;
}
 
</style>
 
</head>
<body>
 
    <h1>
        テーブル下に横スクロールバーを表示し、横スクロール
    </h1>
 
    <div class="scroll_x">
        <table>
            <col style="width: 20%" />
            <col style="width: 20%" />
            <col style="width: 20%" />
            <col style="width: 20%" />
            <tr>
                <th>
                    タイトル
                </th>
                <th>
                    タイトル
                </th>
                <th>
                    タイトル
                </th>
                <th>
                    タイトル
                </th>
            </tr>
            <tr>
                <td>
                    データ
                </td>
                <td>
                    データ
                </td>
                <td>
                    データ
                </td>
                <td>
                    データ
                </td>
            </tr>
            <tr>
                <td>
                    データ
                </td>
                <td>
                    データ
                </td>
                <td>
                    データ
                </td>
                <td>
                    データ
                </td>
            </tr>
        </table>
    </div>
 
</body>
</html>

<

>

PAGETOP