スクロールバーの動きについて（イベントが何度も処理させたい

javascript・jQueryに関して質問させていただきます。

スクロールバーの下向きボタンを１度押したときに、
その時点の位置を取得して、それに100加えた値をセットして
画面表示させて処理を終了させるということを考えています。

いったん下記のように組んでみたのですが、
画面上で動作させると、下向きに動く距離が一定でなく、
なぜかと思い、開発者ツールで試したところ、
イベントを繰り返し実行しているようでした。

$(function () {
$('#MainCotent_aaa').scroll(function () {
//①$(this).scrollTop()で位置を取得
//②上記で取得した値に100を加えて、その値で位置をセット
});
});

.scroll(functionは、スクロールが動いている間はずっと
処理が行われる、というようなことが調べたら判明したので
イベントの前にフラグを作成して、下記のように作り直しました。

$(function () {
var endFlg = false;
$('#MainCotent_aaa').scroll(function () {
if (!endFlg) {
//①$(this).scrollTop()で位置を取得
//②上記で取得した値に100を加えて、その値で位置をセット
endFlg = true;
}
});
});

こうすることで、１回目に下向きボタンを押したときは、
意図する動きをすることが確認できたのですが、その状態
（１回押したあとなので、表示領域が最初から100下方向にずれている）
から再度ボタンを押すと何も反応しませんでした。
開発者ツールで確認したところ、endFlgが既にtrueとなっていて、
処理が何も起きないことがわかりました。

このような場合にどのように対応すれば、押すたびに100ずつ下方向に
ずれていく処理が実現できるのでしょうか？
書き方がわからないので、ご教示お願い致します。
宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

他にいい方法があるかもしれませんが、一応以下のコードでできました。
（動きがわかりやすいように100pxではなく、400pxの移動にしています）

動作確認用サンプル：https://jsfiddle.net/bd5yuL7k/

javascript
1$(function() {
2  scrollCertainDistance(400); // 一回だけスクロールで400px動かすイベントを設定
3
4  function scrollCertainDistance(pixel) {
5    $('.container').one('scroll', function() { // 一回だけスクロールイベント設定
6      $(this).scrollTop($(this).scrollTop() + pixel);
7      setTimeout(function() {scrollCertainDistance(pixel)}, 500); // 0.5秒後に一回だけのスクロールイベントを設定
8    });
9  }
10});