位置を固定したいけど、中の要素はスクロールしたい時用の小技(ドロワーメニューとか)。 デモ See the Pen ZLzOOG by Yoshiaki Itakura (@negibouze) on CodePen. 実装(デモから抜粋) やることは単純でスクロールさせたい要素に高さを指定してあげるだけです。 nav.right ul.scrollable li.item メニュー 01 li.item メニュー 02 li.item メニュー 03 li.item メニュー 04 li.item メニュー 05 li.item メニュー 06 li.item メニュー 07 li.item メニュー 08 li.item メニュー 09 li.item メニュー 10 nav position fixed width 200px height 150px overflow hidden
![position: fixedの子要素をスクロールできるようにする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f7b1dcb6c62ccae1289fd63d4abe923a04cf091e/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9cG9zaXRpb24lM0ElMjBmaXhlZCVFMyU4MSVBRSVFNSVBRCU5MCVFOCVBNiU4MSVFNyVCNCVBMCVFMyU4MiU5MiVFMyU4MiVCOSVFMyU4MiVBRiVFMyU4MyVBRCVFMyU4MyVCQyVFMyU4MyVBQiVFMyU4MSVBNyVFMyU4MSU4RCVFMyU4MiU4QiVFMyU4MiU4OCVFMyU4MSU4NiVFMyU4MSVBQiVFMyU4MSU5OSVFMyU4MiU4QiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZjBmNWFiNmM2NTMzY2M1NGI3YTdiMDJjMDA5MGViMDg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBuZWdpYm91emUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWE2MjFjMDg5NDk4YmMxZWRjMWI3OTQ2Y2RjNjc0MDRi%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dd4bc1ddd2229bc0e497259a1a59a8d1f)