Hogeをクリックしたらプルダウンメニューが展開される。展開されたプルダウンメニューの高さ分だけスクロールを許容してそれ以上下へのスクロールは禁止したい

Question

プルダウンメニューの最下部までスクロールしたら
それ以上下へはスクロールできないよう画面を固定したいのですが、何か良い方法はありますでしょうか？？

都合上、コードの公開などはできないため、以下がイメージになります。
SPビュー

ーーー/ヘッダーーーー
ーーーメインーーーー
【hoge】

ーー-/メイン-ーーー
ーーーフッターーーー

挙動
hogeをクリックすると、
display:noneにしていた
プルダウンメニューが出現する。

再度質問を整理すると

hogeをクリックしてプルダウンメニューが展開した時、現状だとbody最下部までスクロールが可能ですが、これをプルダウンの高さ分だけスクロールを許容して、メニューの高さ以上下にはスクロールできないようにしたいです。

Jsでメニューの高さを取得してそれ以上下へスクロールしたときはスクロール禁止にすれば...!とも思ったのですが、
absoluteで浮かせているためかうまくいかず？でした

わかりにくい点あるかもしれませんが、よろしくお願いいたします。

Comments

[退会済みユーザー]

すいません。質問文の意味が全くわかりません。図で説明するとかもっとわかりやすく説明してください。この質問のままだと正確な回答ができません。

[退会済みユーザー]

失礼いたしました。修正しました。

Answer 1

スクロール禁止ではないですが、、、

isInView
でhoge最下部の非表示を検知したら

scrollIntoViewで戻せば良くないですか？

使う人に優しすくるならスクロールが止まってからscrollIntoViewすると使いやすいかも

Comments

[退会済みユーザー]

便利そうですが、scrollIntoViewはまだ草案ですね。

[oikashinoa]

scrollIntoViewOptionsが非実装なブラウザがあるだけで、scrollIntoViewはどれも実装済みですよ。

[退会済みユーザー]

失礼しました。
こちらのサイトで確認したらほとんどのブラウザで対応しておりました。
https://caniuse.com/#search=scrollIntoView

[退会済みユーザー]

ありがとうございました

Answer 2

Android端末だと、
プルダウン時にbodyとhtmlにoverflow: hidden;を付与することでスクロールすることを防げます。
プルダウンメニュー内のスクロールは高さを取得してあげる必要は無く、overflow-y: auto;でスクロールすることが可能になります。
ただ前述の方法だとIOS端末だとスクロールを防ぐことができません。

IOS端末での背景固定はここのサイトが参考になるかもしれません。
https://spyweb.media/2017/09/21/modal-window-fixed-background-also-support-ios/

あまりお力添えできなくて申し訳ないです。