腾讯的社交产品中，消息列表需要实现无限滚动加载的功能。请设计一个前端方案来实现这个功能，并简要说明实现步骤和关键代码。

答题要点

推荐答题框架：采用 STAR 法则，即 Situation（情景）、Task（任务）、Action（行动）、Result（结果）。关键要点：1. 情景分析：明确无限滚动加载的应用场景，即消息列表滚动到底部时加载更多数据。2. 任务目标：实现滚动监听和数据加载逻辑。3. 行动步骤：监听滚动事件，判断滚动位置是否接近底部；当接近底部时，发送请求获取更多数据；将新数据添加到列表中。4. 结果展示：页面能够平滑地加载更多消息。示例话术：在腾讯社交产品的消息列表场景中，我们的任务是实现无限滚动加载。首先，监听 `window` 的 `scroll` 事件，通过 `scrollTop`、`clientHeight` 和 `scrollHeight` 计算滚动位置。当滚动位置接近底部时，使用 `fetch` 或 `XMLHttpRequest` 发送请求获取更多数据。获取数据后，将其转换为 HTML 元素并添加到列表中。代码示例：`window.addEventListener('scroll', () => { if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 200) { // 发送请求获取数据并添加到列表 } });`