DEV Community
·
解决Nuxt应用中溢出容器的自动滚动问题
💡
原文英文，约800词，阅读约需3分钟。
📝
内容提要
本文介绍了如何解决Nuxt应用中因容器溢出导致的自动滚动问题。通过调整CSS，去掉body的固定高度和溢出隐藏属性，并使用sticky定位固定头部，从而实现内容的自动滚动，提升用户体验。
🎯
关键要点
- 本文介绍了如何解决Nuxt应用中因容器溢出导致的自动滚动问题。
- 初始设计中，主内容容器可滚动，头部和底部固定，使用了CSS的flex和overflow属性。
- 在添加目录后，点击链接无法滚动到对应部分，刷新页面也无法自动滚动到顶部。
- Nuxt.js 3使用Vue Router处理路由，但默认的自动滚动未能正常工作。
- 尝试了多种解决方案，包括自定义滚动行为，但都未能解决问题。
- 问题源于body的overflow和高度属性的组合，导致浏览器无法正确滚动。
- 解决方案是去掉body的固定高度和溢出隐藏属性，使用sticky定位固定头部。
- 这样可以确保头部固定，内容根据路由变化或HTML锚点链接自动滚动。
➡️
