原生js如何实现上拉加载与下拉刷新？

原生JavaScript实现上拉加载和下拉刷新的功能，通常需要监听滚动事件，并在合适的条件下触发相关的加载或刷新操作。以下是实现上拉加载和下拉刷新的基本示例代码：

// 监听滚动事件
window.onscroll = function() {
    // 检查是否滚动到底部
    if ((window.innerHeight + document.documentElement.scrollTop) >= document.documentElement.offsetHeight) {
        // 触发上拉加载
        console.log('上拉加载...');
        // 发起AJAX请求或其他操作来加载更多数据
    }
 
    // 检查是否滚动到顶部
    if (document.documentElement.scrollTop === 0) {
        // 触发下拉刷新
        console.log('下拉刷新...');
        // 发起AJAX请求或其他操作来刷新数据
    }
};

请注意，具体实现可能需要根据实际的页面布局和需求进行调整。例如，你可能需要添加锁定变量来防止在滚动时重复触发加载或刷新操作，或者添加一些缓动效果来提升用户体验。此外，对于复杂的页面，可能还需要考虑使用IntersectionObserver来代替滚动事件监听，以提高性能和灵活性。