-webkit-overflow-scrolling: touch; が有効にならない原因




現象


html のtable タグにおいてスムーズにスクロールする css である-webkit-overflow-scrolling: touch;が効かない。
これはスマホなど画面が小さい場合にでもtableが正常に表示されるため機能。テーブルをスクロールできる。しかし効かない。

以下はこのcssの例


<style type="text/css">
.table_scroll{
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
</style>

<div class ="table_container">
<table>

</table>
</div>


(*)touch; により惰性でスクロールを停止できる。

原因



・そもそも非対応のブラウザが多い。対応状況を確認。
・実際にスクロールしないとスクロールバーが表示されない。スクロールしてみる。
・横スクロールバーを常に表示と-webkit-overflow-scrollingを併用すると表示されなくなる場合あり。注意。

(*)仕様は常に変更さるのでこの限りではない。



キーワード:CSS

Windows トラブルシューティング一覧に戻る


(ご注意事項)本ページは2017年に独自に調査して記載した事項です。本ページには誤りがある可能性はあります。また今後仕様が変更となる可能性があります。
本ページにより発生したいかなる損失も誰も補償しません。あくまでも自己責任で参考にしてください。