overflowしたテーブルを一部だけ動かさない方法

jquery
スポンサーリンク

スマフォでテーブルを表示させる際に、overflowを利用している方は多いと思います。

overflowしてスクロールしたテーブル内で一部(今回は画像)を動かさない方法です。

html

<div class="table-scroll">
    <table style="width: 690px;">
        <tbody>
            <tr class="odd">
                <td style="text-align: center;" colspan="2"><img class="aligncenter size-medium" src="" style="display: block;">
                </td>
            </tr>
            <tr class="even">
                <th style="text-align: center;">項目1</th>
                <td style="text-align: center;">内容1</td>
            </tr>
            <tr class="odd">
                <th style="text-align: center;">項目2</th>
                <td style="text-align: center;">内容2</td>
            </tr>
            <tr class="even">
                <th style="text-align: center;">項目3</th>
                <td style="text-align: center;">内容3</td>
            </tr>
        </tbody>
    </table>
</div>
css

.table-scroll{
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
js

<script>
jQuery('.table-scroll').scroll(function(){
  var scr_img = jQuery(this).find("img");
  var scroll = jQuery(this).scrollLeft();
  sch_img.css("padding-left",scroll+10);
});
</script>

 

この記事書いた人
MITSUI

デジタルマーケティングに16年間従事しているMITSUIです。Google AnalyticsとGoogle Tag Managerが大好きで、これらのツールを活用した情報提供を行っています。ブログではデジタルマーケティングに関する情報や最新のトレンド、ベストプラクティスを紹介しています。

MITSUIをフォローする
Webでお困りごとなら、お気軽にご相談ください
まずは無料相談でお気軽にご相談ください。
jquery
スポンサーリンク
シェアする
MITSUIをフォローする
WEB担当者の備忘録

コメント

タイトルとURLをコピーしました