jQuery Mobile Panel组件展开超长折叠列表时页面自动滚动到底部的原因？

这个问题我之前在项目里也碰到过，主要是jQuery Mobile的collapsible组件和Panel的交互逻辑导致的，具体原因和解决方案如下：

问题根源 #

1. Collapsible组件的默认行为：jQuery Mobile的data-role="collapsible"在展开时，会自动初始化内部的listview，这个初始化过程中组件会尝试滚动到内容区域，当展开后的内容高度超过视口时，就会触发滚动到底部的行为。
2. 自定义动画与组件内置逻辑冲突：你添加的slideUp/Down动画会改变元素高度，而jQuery Mobile的页面布局系统会实时计算视口高度，当高度变化超出预期时，会自动调整页面滚动位置来适配内容。
3. Overlay模式Panel的滚动处理bug：在data-display="overlay"模式下，Panel的滚动和主页面的滚动会有交互冲突，当Panel内内容高度超过视口时，主页面的滚动会被意外触发。

具体解决方案 #

方案1：禁用Collapsible的自动滚动行为 #

在collapsible的展开事件中，阻止默认的滚动行为，同时手动控制滚动位置：

$(document).on("collapsibleexpand", "#mainmenu .ui-collapsible", function(e) {
    // 阻止默认的滚动行为
    e.preventDefault();
    // 记录当前页面滚动位置
    var currentScroll = $(window).scrollTop();
    // 执行自定义slideDown动画
    $(this).find(".ui-collapsible-content").stop().slideDown(300, function() {
        // 动画完成后恢复之前的滚动位置
        $(window).scrollTop(currentScroll);
    });
});

同时，需要覆盖collapsible的默认展开动画，避免组件自带的动画和自定义动画冲突：

.ui-collapsible-content {
    display: none !important; /* 隐藏默认内容，由自定义动画控制 */
}

方案2：初始化Listview时禁止自动滚动 #

当Panel初始化时，手动初始化内部的listview，并设置scrollToTop为false，避免初始化时的滚动：

$("#mainmenu").on("panelopen", function() {
    $(this).find(".ui-listview-outer").listview({
        scrollToTop: false
    });
});

方案3：修改Panel的滚动处理逻辑 #

如果可以调整Panel的显示模式，将data-display改为push或者reveal，这两种模式下Panel的滚动逻辑更稳定，不容易和主页面滚动冲突：

<div data-role="panel" id="mainmenu" role="navigation" data-display="push">

如果必须用overlay模式，可以给Panel添加固定高度并开启内部滚动，让Panel内部滚动独立于主页面：

#mainmenu {
    max-height: 100vh;
    overflow-y: auto;
}

验证方法 #

测试时可以先去掉自定义的slideUp/Down动画，看看是否还会出现滚动问题：如果消失，说明是动画和组件逻辑的冲突；如果仍然存在，就是Panel和collapsible的内置交互问题，再用上面的方案针对性解决。

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