overflow-y:scroll;内の要素でscrollした際のbodyのscrollを止める方法

Question

いつもお世話になっております。

本日はoverflow-y:hidden;に関してお聞かせ下さい。
今ポップアップ内にoverflow-y:scroll;でスクロールするものを作成しているのですが、
ポップアップ内をスクロールして最下層まで行くと後ろ？のbodyタグがスクロールしてしまいます。

これを止める方法はないでしょうか。。。

よろしくお願いいたします！

Answer 1

html, body {
  height:100%;
}
body.st-modlOpen {
  height: 100%;
  overflow: hidden;
}

1. ポップアップを開く前に現在のスクロール量を取得しておきます
2. ポップアップが開いた時にbodyに.st-modlOpenクラスをつけます
3. モーダルを閉じた時にbodyの.st-modlOpenクラスを外します
4. 元のスクロール量を戻します

こんな感じでどうでしょうか？

Answer 2

positionをfixedにすることで直るのでは無いでしょうか？

Answer 3

ポップアップが一緒にスクロールされるのを防ぎたいなら position:fixed でしょうね。
あと、ポップアップ表示中はJavaScriptでbodyのスクロールを禁止しておく(return false とか event.preventDefault() とかで)という方法もありかもしれません。

Answer 4

ポップアップの表示中にはbody側のoverflowをhiddenにするのでは駄目でしょうか？
他の方法なら、positionにfixedを設定する等もあります。