使用Limitless主题的后台管理面板下拉刷新功能失效问题排查

我在用Limitless主题搭建后台管理面板时，遇到移动端下拉刷新（swipe down to refresh）功能失效的问题，试过以下方案但未奏效：

已尝试的无效方案 #

1. 为body添加自定义CSS类：

.allow-pull-to-refresh {
    overflow: auto !important;
    overscroll-behavior: auto !important;
}

2. 尝试JavaScript脚本：

function preventDefaultTouchmove(event) {
    event.preventDefault();
}

document.addEventListener('touchmove', preventDefaultTouchmove, { passive: false });

document.removeEventListener('touchmove', preventDefaultTouchmove);

针对性解决方案 #

1. 禁用主题内置的自定义滚动插件

Limitless默认使用Perfect Scrollbar这类自定义滚动组件，它们会拦截原生触摸事件，导致下拉刷新无法触发。找到页面中负责滚动的容器（通常带有.scrollable或.ps类），移除这些类，或者注释掉插件初始化代码：

// 找到初始化Perfect Scrollbar的代码，注释掉目标容器的初始化
// new PerfectScrollbar('#main-content-container');

2. 正确设置滚动容器的CSS属性

原生下拉刷新需要在实际承载内容的滚动容器上配置，不要直接作用于body：

/* 替换为你页面的滚动容器选择器，比如.main-content */
.main-content {
    overflow-y: auto;
    height: 100vh; /* 确保容器高度填满视口，触发滚动 */
    overscroll-behavior-y: contain; /* 允许下拉刷新，同时避免滚动穿透到父容器 */
}

3. 清理冲突的触摸事件监听

排查全局的touchmove事件，移除那些强制阻止默认行为的监听：

// 遍历所有元素，移除passive为false的touchmove监听
document.querySelectorAll('*').forEach(element => {
    const touchListeners = getEventListeners(element).touchmove || [];
    touchListeners.forEach(listener => {
        if (!listener.options.passive) {
            element.removeEventListener('touchmove', listener.listener, listener.options);
        }
    });
});

4. 验证触发条件

确保页面内容高度超过视口高度（没有滚动条的话，下拉刷新无法触发），同时测试的移动端浏览器支持原生下拉刷新（Chrome、Safari等现代浏览器均支持）。

内容的提问来源于stack exchange，提问作者Chaitya Panchal