スマホ版webページで表(table)のスクロールをぬるぬるさせる

この記事のとおりにCSSを追加したところ、横スクロールがもっさい動きになってしまった。
スマホのスクロールには慣性が付いているので、同じようにぬるぬるする動きをさせるようにしました。

PCだとChrome,Firefox。スマホはiPhoneのGoogleとSafariで動作確認済み。
html

divタグにクラスを設定しておく。

/*中略*/
css

div要素のscrollクラスに下記を追加する。

div.scroll{
    -webkit-overflow-scrolling: touch;
}
本記事の公開後、wpのプラグイン”crayon syntax highlighter”を導入したところ、div.scrollのcssが当たらなくなってしまったのかスクロールに慣性が効かなくなった。
これは同プラグインのdiv.crayon-mainに同様のcssを当てれば解決する。
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

はじめまして、秋月なるです。
アラフォー会社員で、スマホアプリ/ゲーム/AIが好き。新しいものを見ると触りたくなるタイプで、スマホやウェアラブル等ガジェットが好きですが、よく買ったあとに「思ってたのと違う…」をやりがち。
ブログ投稿は趣味の1つなので、ゆるく続けていこうと思います。

目次