jquery div内でのスクロール上下判定及び制御

今回documentではなく、divの中からスクロールを制御する機能を実装することがありました。
色々方法を探しながら何となく見つけた方法を共有します。

html

<div class="notify">
  <ul id="lists">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

javascript

$(document).on("mousewheel", function(e) {
  var delta = e.originalEvent.deltaY ? - (e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : - (e.originalEvent.detail);

  if ($(e.target).parents(".notify #lists").size() > 0) {
    if ($(".notify #lists")[0].scrollHeight - $(".notify #lists").scrollTop() == $(".notify #lists").outerHeight()) {
      if (delta < 0) {
        e.preventDefault();
      }
    }
    if ($(".notify #lists").scrollTop() == 0) {
      if (delta > 0) {
        e.preventDefault();
      }
    }
  }
});

このようなコードがあるとします。

まずマウスを使ってスクロールするのでこちらを定義します。
$(document).on("mousewheel", function(e) {});

次にulのlistsの中でスクロールが起きているのかを判定するためにこちらを追加します。
if ($(e.target).parents(".notify #lists").size() > 0) {}

document(divの外)からスクロールすると上記のifはfalseになり、#listsの中だったら1になるはずです。

その次にこちらのコードでdivの一番下なのかがわかります。
if ($(".notify #lists")[0].scrollHeight - $(".notify #lists").scrollTop() == $(".notify #lists").outerHeight()) {}

$(".notify #lists")[0].scrollHeightはスクロールの全体の高さ、
$(".notify #lists").scrollTop()はスクロールの現在の高さ、
$(".notify #lists").outerHeight()はulである#listsの高さです。

最後に一番下だったらdocument(画面)のスクロール及び、全ての動作を止めたかったので次のコードを書きました。

if (delta < 0) {
  e.preventDefault();
}

上記のコードに

if ($(".notify #lists").scrollTop() == 0) {
  if (delta > 0) {
    e.preventDefault();
  }
}

のようなifがありますが、それは現在のスクロールが一番上だったら同じく処理を止めるため使ったものです。

単純に上下を判定したいのならこちらのコードで済みます。

if (delta < 0) {
  alert("一番下です。");
} else {
  alert("一番上です。");
}