【やりたいこと】スクロールできるグループを作りたい
下記画像のように、任意のエリアだけ、スクロールできるようにする方法を知りたいです。できそうでできなくて、ご教授いただけると幸いです><
@Sho Nishimura さんのnukadocoというサービスのUIが綺麗すぎて、めちゃめちゃ参考にさせてもらっています。
参考にしていただきありがとうございます！
ベータ版にもかかわらず、nukadocoを利用いただいているユーザー様が日々増えていき嬉しい限りです。
閃きをメモる→ヌカドコから質問もらう→思考を発展させる
というシンプルな工程で、驚くほど内省が深まりますので、ぜひまだの皆様にもご利用いただき
素敵なビジネスアイデアなどを創出していってほしいです:quad_parrot:
ご質問の件、お答えします！
① reusable elementsとして読み込んだpopupに任意のIDを付与します（例では popup_account_setting）
② Settings > seo/metatagsのscriptに下記のCSSを記述します。
#popup_account_setting {
max-height: 80vh;
height: auto;
overflow: hidden;
}
#popup_account_setting > div:nth-child(2) {
overflow-y: auto;
overflow-x: hidden;
max-height: calc(80vh - 140px);
}
③上記は、構造として固定header／変動main部分／固定footerという前提です。max-height: calcのpx数値を調整してフッター固定部分に表示領域を調整してください。基本的には以上で実現できます。
補足として、このpopup reusable elements自体にCSS記述せずに、なぜ「Settings > seo/metatagsのscript」に記述しているかですが、デスクトップの場合は問題ないのですがモバイルの場合ですと、CSSの読み込みタイミングが影響し、表示位置がずれてしまったりといった厄介ごとが起きやすいため、影響を受けにくい「Settings > seo/metatagsのscript」にしています。
