overflowした要素をボタンを押してスクロール
テーブルやら何やらがoverflowした時に要素をボタンでスクロールさすスクリプトですん。押してる間スクロールして、離すと止まりますん。
「overflowしたとこが分からん」「スクロールバーありますよ」「分からん！！」「はい。何とかします!!」
って事で。やりました。ちょっと気に入ってますん。
jQueryプラグインも作ってみました。
これだとページに何個あっても動きますん。
はい。分かりにくいと思うのでサンプルですん
ボタンを押すとヌメ～っと移動しますん。
◄
| A | B | C | D | E | F |
|---|---|---|---|---|---|
| プリン | ヨーグルト | ゼリー | グミ | ハリボーうまい | ばばばば |
| プリン | ヨーグルト | ゼリー | グミ | ハリボーうまい | ばばばば |
| プリン | ヨーグルト | ゼリー | グミ | ハリボーうまい | ばばばば |
| プリン | ヨーグルト | ゼリー | グミ | ハリボーうまい | ばばばば |
| プリン | ヨーグルト | ゼリー | グミ | ハリボーうまい | ばばばば |
►
コード
HTML
今回はテーブルでやってます。中の要素は邪魔なので省いてますん。
|
1 2 3 4 5 6 7 8 |
<div id="scrl_btn_wrap"> <p id="scrl_btn_before" class="scrl_btn">◄</p> <div id="ovftbl_wrap"> <table id="ovftbl"> </table> </div> <p id="scrl_btn_after" class="scrl_btn">►</p> </div> |
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 32 33 34 35 36 37 38 39 |
#ovftbl_wrap { overflow-x: auto; margin-left: 2.5em; margin-right: 2.5em; } .scrl_btn { text-align: center; display: inline-block; width: 1.5em; height: 1.5em; border-radius: 50%; background-color: #13B3A1; color: #fff; font-size: 21px; cursor: pointer; line-height: 1.5; opacity: 0.4; } #scrl_btn_wrap { position: relative; } #scrl_btn_before { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; } #scrl_btn_after { position: absolute; top: 0; bottom: 0; right: 0; margin: auto; } |
Javascript(jQuery)
|
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 |
//コマ数・送りの設定 var feed = 1; var frame = 1; //横幅取得・設定 var tblWrapW = $('#ovftbl_wrap').outerWidth(); var tblW = $('#ovftbl').outerWidth(); var tblScrlW = parseInt(tblW - tblWrapW); $('#ovftbl_wrap').outerWidth(tblWrapW); $('#ovftbl').outerWidth(tblW); //カウント初期値 var count = 0; //clearinterval対策 var setItv = ''; //スクロール値取得 $('#ovftbl_wrap').scroll(function() { count = $(this).scrollLeft(); }); //移動設定 var countUp = function() { if (checkBA === 'a') { var count2 = count + feed; $('#ovftbl_wrap').scrollLeft(count2); } else { var count2 = count - feed; $('#ovftbl_wrap').scrollLeft(count2); } } //インターバルの設定 function setItvF() { setItv = setInterval(countUp, frame); } //進む $('#scrl_btn_after').mousedown(function() { checkBA = 'a'; if (count < tblScrlW) { $(this).css('opacity', '0.7'); setItvF(); } }).mouseup(function() { if (count <= tblScrlW) { $(this).css('opacity', '0.4'); clearInterval(setItv); } }); //戻る $('#scrl_btn_before').mousedown(function() { checkBA = 'b'; if (0 < count) { $(this).css('opacity', '0.7'); setItvF(); } }).mouseup(function() { if (0 <= count) { $(this).css('opacity', '0.4'); clearInterval(setItv); } }); |
解説
|
1 2 3 4 5 6 7 8 9 10 |
//コマ数・送りの設定 var feed = 1; var frame = 1; //横幅取得・設定 var tblWrapW = $('#ovftbl_wrap').outerWidth(); var tblW = $('#ovftbl').outerWidth(); var tblScrlW = parseInt(tblW - tblWrapW); $('#ovftbl_wrap').outerWidth(tblWrapW); $('#ovftbl').outerWidth(tblW); |
『コマ数・送りの設定』は後で使います。この設定値で速さと滑らかさが決まりますん。
feedが一回で移動する幅です。frameが動かす間隔ですん。(今は1ミリ秒に1回)
そして、『横幅取得・設定』はテーブルを囲っているdiv/#ovftbl_wrapとtable/#ovftblの横幅を取得して設定していますん。
※どうやらouterWidthは小数点以下が丸められるので、取得した数値と実際のdivとtableの数値を合わす為に設定してますん。
|
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 |
//カウント初期値 var count = 0; //clearinterval対策 var setItv = ''; //スクロール値取得 $('#ovftbl_wrap').scroll(function() { count = $(this).scrollLeft(); }); //移動設定 var countUp = function() { if (checkBA === 'a') { var count2 = count + feed; $('#ovftbl_wrap').scrollLeft(count2); } else { var count2 = count - feed; $('#ovftbl_wrap').scrollLeft(count2); } } //インターバルの設定 function setItvF() { setItv = setInterval(countUp, frame); } |
『カウント初期値』でスクロール値を入れる箱を始まりの０で作っときます。
んで『移動設定』で右ボタンだったら【足す】左ボタンだったら【引く】だよって設定してますん。
『インターバルの設定』で上のframeで設定した感覚でインターバルするよって設定してますん。
|
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 |
//進む $('#scrl_btn_after').mousedown(function() { checkBA = 'a'; if (count < tblScrlW) { $(this).css('opacity', '0.7'); setItvF(); } }).mouseup(function() { if (count <= tblScrlW) { $(this).css('opacity', '0.4'); clearInterval(setItv); } }); //戻る $('#scrl_btn_before').mousedown(function() { checkBA = 'b'; if (0 < count) { $(this).css('opacity', '0.7'); setItvF(); } }).mouseup(function() { if (0 <= count) { $(this).css('opacity', '0.4'); clearInterval(setItv); } }); |
『進む』が右ボタン、『戻る』が左ボタンですん。
mousedownしてる(押してる)時に色を濃くして、さっき作った『インターバルの設定』を発動！mouseupしてる(離した)時に色を濃くして『インターバルの設定』をストップ！ってしてますん。
ちなみにif文で右の時はtableの幅から囲ってるdivのサイズ内の時発動でっせ。左の時はそれが0以上の時でっせってしてますん。
いや～！面倒くさいですね～。分かんね～よ。とか、間違ってるよ！とか、こうせえ！とか、ダンカン！バカヤローとかあればコメントくだせ～ですん。
このスクリプトで内包された要素を初期状態で右揃えや中央揃えする方法はあるのでしょうか？
今回だとテーブルの中の要素を中央揃えにしたいって事ですかね？
ですと、cssでやるといいですよ
tableだと、
td{text-align:center;};
みたいな感じですね
コメントありがとうございます。
この記事の場合ですとtdではなくtableそのものを中央揃えにしたいのです。
初期状態でtheadのthタグのB〜Eが表示されている感じです。
cssではどうにもならなくて困っております。
自己解決いたしました。
jQueryで以下のような記述を追加したところ、想定通りの表示になりました。
$(window).load(function() {
$(‘#ovftbl_wrap’).scrollLeft(value);
});
value に中央揃えさせたい要素の幅を入れる感じです。