jquery - 点击时手风琴向左弹跳

Question

加载内容 iframe 时，jQuery 手风琴向左弹跳。我难住了。

有什么建议么？

我猜这与 iframe 大小调整代码有关。

$(function() {
    $( "#accordion" ).accordion({
        collapsible: true, 
        active: false
    });
});

jsFiddle 中的手风琴

Answer 1

不是很酷，但你可以很容易地尝试一些这样的解决方法：

$(function(){ $('.ui-accordion-header').on('click',function(){
        if($(this).hasClass('ui-state-active')){
         $('body').css('overflow','hidden');
        }else{
        setTimeout(function(){
         $('body').css('overflow','auto');
         },600);
        }
        });
        });

这里的工作示例

Answer 2

当滚动条出现时，反弹是正常的浏览器行为。在IE 7（我认为）等较旧的浏览器中，滚动条总是可见的，只是在不需要时禁用。所以不会发生反弹。

调整溢出

您仍然可以实现这一点，并使用该overflow属性始终使滚动条可见，即使在不需要时也是如此。

就像旧版浏览器一样，它会在不需要时禁用滚动条，并在需要时启用它。因此，没有反弹。

下面的 CSS 会做到这一点：

body {
    overflow-y: scroll;
}

---

演示 1 - 始终显示滚动条

---

调整高度

另一种选择是使文档略高于 100%，因此您也始终可以看到滚动条，但它始终处于启用状态。

您可以为此添加以下 CSS：

html {
    height: 101%;
}

---

演示 2 - 使用更大的 HTML 文档

---

DEMO 1似乎是更标准的方法，因为它看起来更像过去的浏览器，并且灰色的滚动条在禁用时并不是那么可见。

DEMO 2可能不太受欢迎，因为与上述选项不同，从不禁用的滚动条似乎总是指示可滚动的内容，即使内容不是。

使用 JavaScript 解决方案可能会工作，但也更重，维护/更新可能更乏味。