JQuery Mobileでウィンドウの横スクロールバーが動かない

前提・実現したいこと

JQuery Mobileを使用してレイアウトを整え、テーブルを作成しています。
どんなにテーブル内の文字列が長くなっても折り返さず、
横の幅をnowrapを指定して一行にして表示させています。
横に広がった分をウィンドウに横スクロールバーを表示させ、
横にスクロールをして全体を表示させたいです。

発生している問題・エラーメッセージ

上記の事柄を解決するために
over-flow:scroll でスクロールバーを表示させるところまではできたのですが、
横スクロールバーが動かせない状態になっており、
横にスクロールができないようになっております。

今回はJQuery Mobileを使用することと、
テーブルにスクロールバーを表示させてスクロールさせるのではなく
ウィンドウのスクロールバーでスクロールさせるようにしたいです。

どのように解決すればよいか、お教え願いますでしょうか。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<title>作品と冒頭</title>
5<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
6<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
7<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
8</head>
9<body style="overflow:scroll;">
10<!--ページ領域-->
11<div>
12   <table>
13      <tr>
14        <th>作品</th>
15        <th>冒頭</th>
16      </tr>
17      <tr>
18        <td nowrap>雪国</td>
19        <td nowrap>国境の長いトンネルを抜けると雪国であった。夜の底が白くなった。信号所に汽車が止まった。向側の座席から娘が立って来て、島村の前のガラス窓を落した。雪の冷気が流れこんだ。娘は窓いっぱいに乗り出して、遠くへ呼ぶように、「駅長さあん、駅長さあん」明りをさげてゆっくり雪を踏んで来た男は、襟巻で鼻の上まで包み、耳に帽子の毛皮を垂れていた。</td>
20      </tr>
21      <tr>
22        <td nowrap>走れメロス</td>
23        <td nowrap>メロスは激怒した。必ず、かの邪智暴虐じゃちぼうぎゃくの王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。きょう未明メロスは村を出発し、野を越え山越え、十里はなれた此このシラクスの市にやって来た。</td>
24      </tr>
25    </table>
26</div>
27</body>
28</html>
29

試したこと

試しにJQuery Mobileを読み込まないようにすると
ウィンドウの横スクロールバーが動くようになることは確認しました。
それと、bodyタグでwidthを以下のように広く指定して確認してみると

<body style="overflow:scroll;width:3000px;"> 画面の横にはみ出た部分が描画されておらず、途中で途切れて表示されます。

補足情報

ブラウザはGoogle Chromeで確認しています。
バージョンは71.0.3578.98です。

行動規範の内容に同意します

回答1件

ベストアンサー

JQuery Mobileの設計思想かと思います。
スマホって縦スクロール前提で作られていて横スクロールはさせないものです（スワイプはそもそもスクロールではなく別コンテンツをスライドで持ってくるものですし）

CSSとJavaScriptのコードを読み込めばわかりますが、
CSS側で各所でoverflow:hiddenが設定されていて、JavaScript側で後付けでui-***がHTMLに付与されていっているのがわかると思います。
後付けでHTMLに付与されるのでインラインスタイルで書いてもおそらく上書きされてしまうのかと。
もしかしたら!importantつければうまくいくかもしれませんが、その後にどんな不具合があるかわからないので、よほどの理由がない限り横スクロールはやめておいたほうが良さそうです。
（それかjQueryMobile以外のフレームワークに切り替えるか）

投稿2018/12/24 19:56

m.ts10806

総合スコア80850

hiro33

2018/12/25 12:40

そうなんですね。設計思想ですか。 !importantつけてみたのですがうまくいかなかったので、横スクロールするかどうかも含めてもう一度考えてみます。丁寧に答えていただきありがとうございます。

m.ts10806

2018/12/25 12:51

別のやり方を検討したほうが良いでしょうね。そもそも後から書き換えているので、デベロッパーツールで見た時にインラインスタイルも消えてるかもしれません。それだけjQueryUIに限らずフレームワークは癖があります。「できないものはできない」と踏み、似たような動きをそのフレームワークが持っているコンポーネント内で探すか、別の動きで代替するしかないですね。

行動規範の内容に同意します