[CSS]fixed指定でスクロール位置が戻ってしまう

Question

ページ内で下へスクロールし、モーダルを表示させると
スクロールした分が0になり、ページの一番上に戻ってしまうのを
防ぐ方法は御座いますでしょうか？

参考のサイトなど御座いましたらご教示いただけると幸いでございます。
宜しくお願い致します。

---

// ページ全体
.contents {
  overflow: hidden;
  position: absolute;
  // ページの高さや横幅等
}

Comments

[kei344]

書き方、使用しているライブラリなどによりますので、具体的にHTMLおよびCSS、JavaScriptなどを質問文に追記いただいたほうが回答を得られやすいと思います。

[kei344]

特にモーダルの実装が問題なので、CSS1箇所だけではなんともいえません。

[star24star]

抜粋して表記が難しいので、参考になるサイトを教えていただけますとありがたいです。

[kei344]

実装がわからないので参考になるサイトも提示できません。モーダルに使用しているライブラリのURLや、モーダルを表示させるためのクリックイベントが当たっている要素などはどうなっていますか？

Answer 1

モーダル表示でではなくドロワーメニューですが、似たようなことをやったことがあります。
（CSSではなくJavaScriptでの操作になります）

１．初期:
グローバルでスクロール位置記憶用の変数を初期化（var scrollpos = 0;など）
コンテンツボディ部分全体をdiv等で囲んでおく

2.モーダル表示ボタンをクリックした時：
・変数にクリック時点のスクロール量を格納（scrollps = $(window).scrollTop();）
・コンテンツボディをfixedにして、top位置をその時点のスクロール量分だけ上にずらす

3.モーダルを閉じる時
・コンテンツボディのfixedを解除し、ウィンドウのスクロールを2の時点の位置まで戻す

こんな感じの操作をモーダルの表示／非表示のタイミングに組み込んでやるとできるかもしれません。
具体的なコードは現状の詳細が分からないので書けません。