DEV Community
·
解决页面加载时自动滚动到 Cal.com 内嵌组件的问题
💡
原文英文，约600词，阅读约需3分钟。
📝
内容提要
在Next.js项目中，开发者遇到Cal.com嵌入导致页面自动滚动的问题。最终通过使用Intersection Observer API解决，监测日历组件的可见性，仅在需要时加载，避免自动滚动并提升性能。此方法有效改善用户体验，建议开发者使用。
🎯
关键要点
- 在Next.js项目中，Cal.com嵌入导致页面自动滚动的问题。
- 自动滚动问题在每次页面加载时发生，影响用户体验。
- 尝试将嵌入放入固定尺寸的容器中未能解决问题。
- 使用Intersection Observer API监测日历组件的可见性。
- 仅在日历组件可见时加载，避免自动滚动。
- 通过条件渲染提升性能，只有在需要时才加载日历。
- 该解决方案改善了用户体验，建议开发者使用。
➡️
