jquery - nicescroll，当 div 改变大小时需要自动调整大小

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();
    });
});