Home > Javascript > overflowした要素をボタンを押してスクロール

overflowした要素をボタンを押してスクロール

公開日:

最終更新日:

overflowした要素をボタンでスクロールするのアイキャッチ画像

テーブルやら何やらがoverflowした時に要素をボタンでスクロールさすスクリプトですん。押してる間スクロールして、離すと止まりますん。

「overflowしたとこが分からん」「スクロールバーありますよ」「分からん!!」「はい。何とかします!!」

って事で。やりました。ちょっと気に入ってますん。

jQueryプラグインも作ってみました。

これだとページに何個あっても動きますん。

はい。分かりにくいと思うのでサンプルですん

ボタンを押すとヌメ~っと移動しますん。

A B C D E F
プリン ヨーグルト ゼリー グミ ハリボーうまい ばばばば
プリン ヨーグルト ゼリー グミ ハリボーうまい ばばばば
プリン ヨーグルト ゼリー グミ ハリボーうまい ばばばば
プリン ヨーグルト ゼリー グミ ハリボーうまい ばばばば
プリン ヨーグルト ゼリー グミ ハリボーうまい ばばばば

コード

HTML

今回はテーブルでやってます。中の要素は邪魔なので省いてますん。

CSS

Javascript(jQuery)

解説

『コマ数・送りの設定』は後で使います。この設定値で速さと滑らかさが決まりますん。

feedが一回で移動する幅です。frameが動かす間隔ですん。(今は1ミリ秒に1回)

そして、『横幅取得・設定』はテーブルを囲っているdiv/#ovftbl_wrapとtable/#ovftblの横幅を取得して設定していますん。

※どうやらouterWidthは小数点以下が丸められるので、取得した数値と実際のdivとtableの数値を合わす為に設定してますん。

『カウント初期値』でスクロール値を入れる箱を始まりの0で作っときます。

んで『移動設定』で右ボタンだったら【足す】左ボタンだったら【引く】だよって設定してますん。

『インターバルの設定』で上のframeで設定した感覚でインターバルするよって設定してますん。

『進む』が右ボタン、『戻る』が左ボタンですん。

mousedownしてる(押してる)時に色を濃くして、さっき作った『インターバルの設定』を発動!mouseupしてる(離した)時に色を濃くして『インターバルの設定』をストップ!ってしてますん。

ちなみにif文で右の時はtableの幅から囲ってるdivのサイズ内の時発動でっせ。左の時はそれが0以上の時でっせってしてますん。

いや~!面倒くさいですね~。分かんね~よ。とか、間違ってるよ!とか、こうせえ!とか、ダンカン!バカヤローとかあればコメントくだせ~ですん。

Comment

よろしければコメントをどうぞ