目標

コレ↓ を作ります。

完成形

functionStartScroll(target_id){constele=document.getElementById(target_id);varstyle=ele.style;style.overflowY="scroll";//横スクロールするstyle.whiteSpace="nowrap";//改行しないstyle.setProperty("-ms-overflow-style","none");style.setProperty("scrollbar-width","none");style.setProperty("-webkit-scrollbar","none");/**
     * この値がno以外になったらスクロールを終了する
     */letscroll_exit="no";functionscroll(){if(scroll_exit=="no"){//スクロールが終了に設定されていない事を確認if(!ele.scrollWidth==0){//スクロールが必要な場合letlastLeft=ele.scrollLeft;//現在のスクロール位置を記録functionmove_left(){//実際にスクロールする関数ele.scrollLeft++;//1スクロールするif(lastLeft==ele.scrollLeft){//最後までスクロールした事を確認setTimeout(function(){//1000ms(1秒)後に一番左に戻すele.scrollLeft=0;//1000ms(1秒)後に一番左に戻すsetTimeout(scroll,2000);//一番左に戻してから2000ms(2秒)後にスクロールを再開する},1000);//1000ms(1秒)後に一番左に戻す}else{//最後までスクロールしていない場合lastLeft=ele.scrollLeft;//現在のスクロール位置を更新setTimeout(move_left,20)//20はスクロール速度（値が小さい方が早くスクロール）};};move_left();//最初の一回を実行}else{//スクロールが不要な場合setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認};};};newPromise(()=>{//非同期でscroll();//最初のスクロールを開始する});returnfunction(){scroll_exit="yes";};};

作り方

複数の要素をスクロールできるように関数を作ります。

functionscroll(target_id){}

まず getElementByIdをします。

functionscroll(target_id){constele=document.getElementById(target_id);}

次にstyleを設定します。

functionscroll(target_id){constele=document.getElementById(target_id);varstyle=ele.style;style.overflowY="scroll";//横スクロールするstyle.whiteSpace="nowrap";//改行しないstyle.setProperty("-ms-overflow-style","none");style.setProperty("scrollbar-width","none");style.setProperty("-webkit-scrollbar","none");}

自動でスクロール

ここから自動でスクロールできるようにします。

まず、スクロールを終了できるようにします。

functionscroll(target_id){constele=document.getElementById(target_id);varstyle=ele.style;style.overflowY="scroll";//横スクロールするstyle.whiteSpace="nowrap";//改行しないstyle.setProperty("-ms-overflow-style","none");style.setProperty("scrollbar-width","none");style.setProperty("-webkit-scrollbar","none");/**
     * この値がno以外になったらスクロールを終了する
     */letscroll_exit="no";}

スクロールする関数を作ります。

functionscroll(target_id){constele=document.getElementById(target_id);varstyle=ele.style;style.overflowY="scroll";//横スクロールするstyle.whiteSpace="nowrap";//改行しないstyle.setProperty("-ms-overflow-style","none");style.setProperty("scrollbar-width","none");style.setProperty("-webkit-scrollbar","none");/**
     * この値がno以外になったらスクロールを終了する
     */letscroll_exit="no";functionscroll(){};}

scroll_exitが noの時以外実行しないようにします。

functionscroll(){if(scroll_exit=="no"){//スクロールが終了に設定されていない事を確認};};

スクロール可能な横幅が0になっているか確認して、スクロールが必要か確認します。

functionscroll(){if(scroll_exit=="no"){//スクロールが終了に設定されていない事を確認if(!ele.scrollWidth==0){//スクロールが必要な場合}else{//スクロールが不要な場合};};};

スクロールが不要な場合２秒後にもう一度スクロールが不要か確認します。

functionscroll(){if(scroll_exit=="no"){//スクロールが終了に設定されていない事を確認if(!ele.scrollWidth==0){//スクロールが必要な場合}else{//スクロールが不要な場合setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認};};};

スクロールが必要な場合の処理

ここからスクロールが必要な場合の処理です。

初めに、現在どのくらいスクロールしているか取得しておきます。

functionscroll(){if(scroll_exit=="no"){//スクロールが終了に設定されていない事を確認if(!ele.scrollWidth==0){//スクロールが必要な場合letlastLeft=ele.scrollLeft;//現在のスクロール位置を記録}else{//スクロールが不要な場合setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認};};};

左にスクロールする関数を作ります。

functionscroll(){if(scroll_exit=="no"){//スクロールが終了に設定されていない事を確認if(!ele.scrollWidth==0){//スクロールが必要な場合letlastLeft=ele.scrollLeft;//現在のスクロール位置を記録functionmove_left(){//実際にスクロールする関数};}else{//スクロールが不要な場合setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認};};};

左に1スクロールします。

functionscroll(){if(scroll_exit=="no"){//スクロールが終了に設定されていない事を確認if(!ele.scrollWidth==0){//スクロールが必要な場合letlastLeft=ele.scrollLeft;//現在のスクロール位置を記録functionmove_left(){//実際にスクロールする関数ele.scrollLeft++;//1スクロールする};}else{//スクロールが不要な場合setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認};};};

現在のスクロール位置を取得して、事前に取得しておいた位置と同じか比較する事で最後までスクロールしたか確認します。

functionscroll(){if(scroll_exit=="no"){//スクロールが終了に設定されていない事を確認if(!ele.scrollWidth==0){//スクロールが必要な場合letlastLeft=ele.scrollLeft;//現在のスクロール位置を記録functionmove_left(){//実際にスクロールする関数ele.scrollLeft++;//1スクロールするif(lastLeft==ele.scrollLeft){//最後までスクロールした事を確認}else{//最後までスクロールしていない場合};};}else{//スクロールが不要な場合setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認};};};

最後までスクロールしていない場合

次のスクロールを開始する前に、現在のスクロール位置を事前に取得しておきます。

functionscroll(){if(scroll_exit=="no"){//スクロールが終了に設定されていない事を確認if(!ele.scrollWidth==0){//スクロールが必要な場合letlastLeft=ele.scrollLeft;//現在のスクロール位置を記録functionmove_left(){//実際にスクロールする関数ele.scrollLeft++;//1スクロールするif(lastLeft==ele.scrollLeft){//最後までスクロールした事を確認}else{//最後までスクロールしていない場合lastLeft=ele.scrollLeft;//現在のスクロール位置を更新};};}else{//スクロールが不要な場合setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認};};};

20ms待機してからもう一度スクロールします。

functionscroll(){if(scroll_exit=="no"){//スクロールが終了に設定されていない事を確認if(!ele.scrollWidth==0){//スクロールが必要な場合letlastLeft=ele.scrollLeft;//現在のスクロール位置を記録functionmove_left(){//実際にスクロールする関数ele.scrollLeft++;//1スクロールするif(lastLeft==ele.scrollLeft){//最後までスクロールした事を確認}else{//最後までスクロールしていない場合lastLeft=ele.scrollLeft;//現在のスクロール位置を更新setTimeout(move_left,20)//20はスクロール速度（値が小さい方が早くスクロール）};};}else{//スクロールが不要な場合setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認};};};

最後までスクロールできた時

一番右で1000ms待機してから一番左に移動します。

functionscroll(){if(scroll_exit=="no"){//スクロールが終了に設定されていない事を確認if(!ele.scrollWidth==0){//スクロールが必要な場合letlastLeft=ele.scrollLeft;//現在のスクロール位置を記録functionmove_left(){//実際にスクロールする関数ele.scrollLeft++;//1スクロールするif(lastLeft==ele.scrollLeft){//最後までスクロールした事を確認setTimeout(function(){//1000ms(1秒)後に一番左に戻すele.scrollLeft=0;//1000ms(1秒)後に一番左に戻す},1000);//1000ms(1秒)後に一番左に戻す}else{//最後までスクロールしていない場合lastLeft=ele.scrollLeft;//現在のスクロール位置を更新setTimeout(move_left,20)//20はスクロール速度（値が小さい方が早くスクロール）};};}else{//スクロールが不要な場合setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認};};};

2000ms(2秒)待機してからスクロールを再び開始します。

functionscroll(){if(scroll_exit=="no"){//スクロールが終了に設定されていない事を確認if(!ele.scrollWidth==0){//スクロールが必要な場合letlastLeft=ele.scrollLeft;//現在のスクロール位置を記録functionmove_left(){//実際にスクロールする関数ele.scrollLeft++;//1スクロールするif(lastLeft==ele.scrollLeft){//最後までスクロールした事を確認setTimeout(function(){//1000ms(1秒)後に一番左に戻すele.scrollLeft=0;//1000ms(1秒)後に一番左に戻すsetTimeout(scroll,2000);//2000ms(2秒)後にスクロールを再開する},1000);//1000ms(1秒)後に一番左に戻す}else{//最後までスクロールしていない場合lastLeft=ele.scrollLeft;//現在のスクロール位置を更新setTimeout(move_left,20)//20はスクロール速度（値が小さい方が早くスクロール）};};}else{//スクロールが不要な場合setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認};};};

関数の`1回目`を実行する

関数の中から関数を実行していますが、最初の1回は関数の外から実行しないといけないので最初の一回を実行します。

functionscroll(){if(scroll_exit=="no"){//スクロールが終了に設定されていない事を確認if(!ele.scrollWidth==0){//スクロールが必要な場合letlastLeft=ele.scrollLeft;//現在のスクロール位置を記録functionmove_left(){//実際にスクロールする関数ele.scrollLeft++;//1スクロールするif(lastLeft==ele.scrollLeft){//最後までスクロールした事を確認setTimeout(function(){//1000ms(1秒)後に一番左に戻すele.scrollLeft=0;//1000ms(1秒)後に一番左に戻すsetTimeout(scroll,2000);//一番左に戻してから2000ms(2秒)後にスクロールを再開する},1000);//1000ms(1秒)後に一番左に戻す}else{//最後までスクロールしていない場合lastLeft=ele.scrollLeft;//現在のスクロール位置を更新setTimeout(move_left,20)//20はスクロール速度（値が小さい方が早くスクロール）};};move_left();//最初の一回を実行}else{//スクロールが不要な場合setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認};};};

同じようにscroll()も最初の一回を外から実行します。
これは非同期で実行します。

functionscroll(){if(scroll_exit=="no"){//スクロールが終了に設定されていない事を確認if(!ele.scrollWidth==0){//スクロールが必要な場合letlastLeft=ele.scrollLeft;//現在のスクロール位置を記録functionmove_left(){//実際にスクロールする関数ele.scrollLeft++;//1スクロールするif(lastLeft==ele.scrollLeft){//最後までスクロールした事を確認setTimeout(function(){//1000ms(1秒)後に一番左に戻すele.scrollLeft=0;//1000ms(1秒)後に一番左に戻すsetTimeout(scroll,2000);//一番左に戻してから2000ms(2秒)後にスクロールを再開する},1000);//1000ms(1秒)後に一番左に戻す}else{//最後までスクロールしていない場合lastLeft=ele.scrollLeft;//現在のスクロール位置を更新setTimeout(move_left,20)//20はスクロール速度（値が小さい方が早くスクロール）};};move_left();//最初の一回を実行}else{//スクロールが不要な場合setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認};};};newPromise(()=>{//非同期でscroll();//最初のスクロールを開始する});

スクロールを終了する

最後にスクロールを止められるようにします。

functionscroll(){if(scroll_exit=="no"){//スクロールが終了に設定されていない事を確認if(!ele.scrollWidth==0){//スクロールが必要な場合letlastLeft=ele.scrollLeft;//現在のスクロール位置を記録functionmove_left(){//実際にスクロールする関数ele.scrollLeft++;//1スクロールするif(lastLeft==ele.scrollLeft){//最後までスクロールした事を確認setTimeout(function(){//1000ms(1秒)後に一番左に戻すele.scrollLeft=0;//1000ms(1秒)後に一番左に戻すsetTimeout(scroll,2000);//一番左に戻してから2000ms(2秒)後にスクロールを再開する},1000);//1000ms(1秒)後に一番左に戻す}else{//最後までスクロールしていない場合lastLeft=ele.scrollLeft;//現在のスクロール位置を更新setTimeout(move_left,20)//20はスクロール速度（値が小さい方が早くスクロール）};};move_left();//最初の一回を実行}else{//スクロールが不要な場合setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認};};};newPromise(()=>{//非同期でscroll();//最初のスクロールを開始する});returnfunction(){scroll_exit="yes";//スクロールを止める};

実際に使ってみる

今作成した関数を実行する事でスクロールを開始できます。

StartScroll("display");//スクロールを開始するStartScroll("ココはスクロール対象のid");//スクロールを開始する

スクロールを終了するには、関数実行時に取得した関数を実行する事で、一番左に戻ったタイミングでスクロールが終了します。

varend=StartScroll("display");//スクロールを開始する//終了ボタンが押されたときの処理document.getElementById("exit").onclick=function(){end();};

例

今すぐ試す

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><divid='display'>ああああああああああああああああああああああああああああああああ
    </div><buttonid="exit">スクロール終了
    </button><style>#display{width:100px;}</style><script>functionStartScroll(target_id){constele=document.getElementById(target_id);varstyle=ele.style;style.overflowY="scroll";//横スクロールするstyle.whiteSpace="nowrap";//改行しないstyle.setProperty("-ms-overflow-style","none");style.setProperty("scrollbar-width","none");style.setProperty("-webkit-scrollbar","none");/**
             * この値がno以外になったらスクロールを終了する
             */letscroll_exit="no";functionscroll(){if(scroll_exit=="no"){//スクロールが終了に設定されていない事を確認if(!ele.scrollWidth==0){//スクロールが必要な場合letlastLeft=ele.scrollLeft;//現在のスクロール位置を記録functionmove_left(){//実際にスクロールする関数ele.scrollLeft++;//1スクロールするif(lastLeft==ele.scrollLeft){//最後までスクロールした事を確認setTimeout(function(){//1000ms(1秒)後に一番左に戻すele.scrollLeft=0;//1000ms(1秒)後に一番左に戻すsetTimeout(scroll,2000);//一番左に戻してから2000ms(2秒)後にスクロールを再開する},1000);//1000ms(1秒)後に一番左に戻す}else{//最後までスクロールしていない場合lastLeft=ele.scrollLeft;//現在のスクロール位置を更新setTimeout(move_left,20)//20はスクロール速度（値が小さい方が早くスクロール）};};move_left();//最初の一回を実行}else{//スクロールが不要な場合setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認};};};newPromise(()=>{//非同期でscroll();//最初のスクロールを開始する});returnfunction(){scroll_exit="yes";};};varend=StartScroll("display");//スクロールを開始する//終了ボタンが押されたときの処理document.getElementById("exit").onclick=function(){end();};</script></body></html>