Question

我有<article>标记，其中包含大量文本，并且通常在旁边显示jquery nicescroll，但如果它包含可以更改<article>标记的高度“某些可折叠元素”的元素和nicescroll不想重新加载。

我的代码：

<article class="item">
  <div class="reference">some text</div>
  <a href="#long-2" data-toggle="collapse" class="reference-long arr_down"></a>
  <div id="long-2" class="collapse">some text</div>
</div>

如果我点击a，article变得更大，但我需要重新加载精美滚动，当折叠的项目再次关闭时，我需要做同样的事情。

jquery，有时可以工作，但在Safari浏览器中不起作用：

$(document).ready(
function() {
$("article").niceScroll({cursorcolor:"#fff",autohidemode:false, zindex: 999});
}
);
$(function() {  
$('.reference-long').click(function(){
    $("article").getNiceScroll().remove();
    $("article").niceScroll({cursorcolor:"#fff",autohidemode:false, zindex: 999});
  });
});

Answer 1

使用resize()功能代替remove()

$("article").getNiceScroll().resize();

Answer 2

这是解决方案

$("article").getNiceScroll().resize();

但请注意，如果您正在使用任何动画，则必须在调用.resize()函数之前完成动画。

示例：

$('.reference-long').click(function(){
    $("#long-2").slideToggle(function(){
        $("article").getNiceScroll().resize();
    });
});

nicescroll，当div改变它的大小时需要自动调整大小

2 个答案: