質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

2182閲覧

javascript scroll アクション 指定の高さ以上になったら処理を一回実行させる

OOO_777

総合スコア50

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/08/24 04:11

###scroll アクション 指定の高さ以上になったら処理を一回実行させる

スクロールアクションを行っているときに、
if(scroll >= BODYHEIGHT)になったら一回だけ処理を実行させたいです。
現状では何回も処理が行われるので、処理を抜け出したいです。

また、スクロールアクションは負荷がかかりやすいと拝見したので、
clearTimeout設定しています。他に負荷がかかりにくい方法があれば、
教えていただければ幸いです。

###該当のソースコード

javascript

1// contents 高さ取得 2getContentsHeight = function() { 3 let contentsHeight = Math.max.apply(null, [document.body.clientHeight, document.body.scrollHeight, document.documentElement.scrollHeight, document.documentElement.clientHeight]); 4 let Height = (contentsHeight * 0.5); 5 return Height; 6}; 7 8const BODYHEIGHT = getContentsHeight(); 9 10// スクロール量取得 11let getScrollHeight = null 12window.onscroll = function() { 13 14 clearTimeout(getScrollHeight); 15 getScrollHeight = setTimeout(function() { 16 let documentElement = null; 17 if (navigator.userAgent.toLowerCase().match(/webkit|msie 5/)) { 18 documentElement = document.body; 19 } else { 20 documentElement = document.documentElement; 21 } 22 let scroll = Math.floor(documentElement.scrollTop); 23 if(scroll >= BODYHEIGHT){ 24 // 一回だけ行いたい 25 } 26 }, 100 ); 27};

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

ScrollEvent発火時に、処理書いてる時点でClearTimeOutもなにもなくなってます。
Scroll発生時点で、SetTimeOut処理が走るので無駄です。

軽くしたいなら以下のようなサンプルでどうぞ。

コメントはほぼ書いてないので、処理内容から動作を読み取ってください。
なお、これだと1秒間に60回チェックしかしないのでその辺りは仕様との
兼ね合いで。

なぜfloorしてるか謎でしたが、必要なのかと思い追加しました。

javascript

1 2 let scrollTopPoint = 0; 3 let BODYHEIGHT = 1300; 4 let documentElement = null; 5 if (navigator.userAgent.toLowerCase().match(/webkit|msie 5/)) { 6 documentElement = document.body; 7 } else { 8 documentElement = document.documentElement; 9 } 10 let updateScrollPoint = function() { 11 scrollTopPoint = documentElement.scrollTop; 12 }; 13 window.addEventListener ( "scroll" , updateScrollPoint , false); 14 let FPS = 1000/60; 15 scrollTopCheck(); 16 function scrollTopCheck(){ 17 let flooredScrollTopPoint = Math.floor(scrollTopPoint); 18 if(flooredScrollTopPoint >= BODYHEIGHT){ 19 // 処理 20 21 // しょりしたので再帰処理しない 22 // イベントも除去 23 window.removeEventListener ( "scroll" , updateScrollPoint , false); 24 return; 25 } 26 // 処理してないので再帰処理 27 setTimeout(scrollTopCheck,FPS); 28 }

投稿2017/08/24 04:48

編集2017/08/24 04:50
kanimaru

総合スコア1013

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

OOO_777

2017/08/24 05:42

ご回答ありがとうございます。 >Scroll発生時点で、SetTimeOut処理が走るので無駄です そうでしたか… 勉強になります。ありがとうございます。
guest

0

clearTimeoutは関係ないかと思います。
window.onscroll = function() { ; }とかでもいいのですが、
addEventListener / removeEventListener を使えばいいのではないでしょうか。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/removeEventListener

投稿2017/08/24 04:29

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

OOO_777

2017/08/24 05:38

ご回答ありがとうございます。 clearTimeoutは関係ないでしたか… アドバイスありがとうございます。 勉強になりました。
guest

0

グローバルに1つフラグを用意しておき、そのフラグを切り替えては?

javascript

1var actionflg = false; //実行されたかフラグ 2 3function test(){ 4 if(!actionflg){ //実行済みかチェック 5 //実行したい処理 6 7 actionflg = true; //実行済みに切り替え 8 } 9}

「ページ遷移して戻ってきても」「ブラウザ閉じて再度開いても」という条件もあるようでしたらlocalstorageなどで維持しておくと良いです。

投稿2017/08/24 04:29

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

OOO_777

2017/08/24 05:37

ご回答ありがとうございます。 localstorageなどアドバイスありがとうございます。 勉強になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問