自動スクロール機能を実装する方法【JavaScript】

はじめに
- ごあいさつ
- 自動スクロール機能実装のきっかけ
実装
- 実装イメージ
- 実装方法
あとがき

はじめに

ごあいさつ

こんにちは。みちです。

最近ブログの移行に失敗していくつか記事が消えてしまいました。悲しみの雨。

ということで移行はあきらめてこのブログをパワーアップさせることにしました！

今回はパワーアップ第一弾です！

自動スクロール機能実装のきっかけ

このブログは主に豆知識、体験談、ギターコードの3本柱で構成されているのですが、

最近はギターコードの更新頻度が高くなっています。

そのため、よりギターコードのページの利便性を上げるために

某有名サイトのような自動スクロール機能を実装してみようと思い立ちました。

実装

実装イメージ

実際に実装したページがこちらです。

michimasa2886.hateblo.jp

実装方法

①（はてなブログの場合）Markdown記法を選択

f:id:michimasagoroshi:20210821031806p:plain

これをしない場合、一部javascriptのコードが使えません(onclickなど)。

②以下を記載

<div>画面タップで自動スクロール開始/停止できます！</div>
<div>
    <form name="scroll">
        <select name="scroll" class="form-control" id="scroll" onchange="scrollSpeed();">
            <option value="1"> 1 (速い) </option>
            <option value="2"> 2 </option>
            <option value="3"> 3 </option>
            <option value="4"> 4 </option>
            <option selected="" value="5"> スクロール速度 5</option>
            <option value="6"> 6 </option>
            <option value="7"> 7 </option>
            <option value="8"> 8 </option>
            <option value="9"> 9 (遅い) </option>
        </select>
    </form>
</div>
<script type="text/javascript">
    var timerID; //clearInterval用
    var flag = false; //オンオフ切り替え用
    var speed = 90; //デフォルト値
    function scroll(){
        window.scrollBy( 0, 1 );
    }
    //speed決定スクリプト
    function scrollSpeed() {
        var obj = document.getElementById('scroll');
        var index = obj.selectedIndex;
        switch ( index ) {
            case 0:
                speed = 5;
            break;
            case 1:
                speed = 30;
            break;
            case 2:
                speed = 45;
            break;
            case 3:
                speed = 60;
            break;
            case 4:
                speed = 75;
            break;
            case 5:
                speed = 90;
            break;
            case 6:
                speed = 105;
            break;
            case 7:
                speed = 120;
            break;
            case 8:
                speed = 135;
            break;
            case 9:
                speed = 150;
            break;
        }
        autoscroll(true); //速度設定時スクロール開始(関数呼び出し)
    }
    function autoscroll (auto) { //スクロール開始関数
        if (auto == undefined) { //autoが未定義の場合
            auto = false; //autoをfalseに
        }
    
        if ( flag == false ) { //flagがfalseの場合
            timerID = setInterval( "scroll()", speed ); //scroll関数をspeedミリ秒の間隔で繰り返し
            flag = true; //flagをtrueに(スクロール実行中)
        } else { //flagがtrueの場合(スクロール実行中)
            if (auto == true) { //autoがtrueの場合→スクロール速度が設定された場合
                clearInterval(timerID); //スクロールを停止
                TimerID = setInterval( "scroll()", speed ); //新たにtimerIDをセットしスクロールを開始
            } else {
                clearInterval(timerID); //スクロールを停止
                flag = false; //flagをfalseに(スクロール停止中)
            }
        }
    }
</script>
<div id="honbun" onclick="autoscroll()">
 
＃＃＃本文（コードなどを記載）＃＃＃
 
</div>