Question

我正在尝试在我的网站上使用nicescroll，它在任何地方都可以工作，除了在一个页面上我有一个隐藏的div。基本上，我有一个链接，当点击时显示之前隐藏在页面上的一些内容。问题 - 在点击链接并显示内容溢出后，不可见且不可滚动。 Nicescroll由于某种原因不起作用。

两者都在页面上自行工作 - 意思是 - 如果我拿出nicescroll代码并保留show / hide div代码，那么我可以点击链接，页面将变得更长，并会出现一个常规滚动条，我可以向下滚动到内容的底部。相反，如果我取出显示/隐藏代码（只是在页面加载时显示内容）并留在nicescroll代码中，那么页面将作为一个长页面加载，nicescroll栏将显示并正常工作。

我无法让他们一起工作。我认为它与第一次加载时不需要滚动的页面有关，当最初调用nicescroll时它只是说“我不需要为这个页面工作”然后放弃。所以，我试过复制看起来像“nicescroll启动代码”

的东西

<script>
  $(document).ready(function() {    
    $("#right").niceScroll();
  });
</script>

进入单击show / hide链接时调用的函数，希望“重新启动”它但不起作用。

显示/隐藏功能如下所示：

function showHide(shID) {
    if (document.getElementById(shID)) {
        if (document.getElementById(shID+'-show').style.display != 'none') {
            document.getElementById(shID+'-show').style.display = 'none';
            document.getElementById(shID).style.display = 'block';
        }
        else {
            document.getElementById(shID+'-show').style.display = 'inline';
            document.getElementById(shID).style.display = 'none';
        }
    }
}

页面的实际div部分如下所示：

 <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">-Show Stuff</a>
                <div id="example" class="more">
                    <p>
                    "Stuff here"
                    </p>
                    <p><a href="#" id="example-hide" class="hideLink" 
                    onclick="showHide('example');return false;">-Hide Stuff-</a></p>
                </div>

所有内容都包含在id =“right”的div中，这就是nicescroll脚本将其应用于#right的原因（当我没有显示/隐藏功能时，再次正常工作。）

有什么想法吗？

Answer 1

我不知道这是什么正确的解决方案，但是在我的div出现之后工作正常并且我称之为方法：

$("#myHiddenDiv").getNiceScroll().onResize();

Answer 2

首先关闭所有内联的onclick到docready。如果nicescroll附加到#right容器，您可以尝试以下操作：

// cache container:
var $right = $('#right');

// use .on() jquery on container:
$right.on('click', '.showLink', function(e){
e.preventDefault()
$right.find('#example').show();

// resize nicescroll
$right.getNiceScroll().show().resize();

}).on('click', '.hideLink',function(e){
e.preventDefault();
$right.find('#example').hide();

// also hide nicescroll:
$right.getNiceScroll.hide();

});

当隐藏div显示时，nicescroll不滚动

2 个答案: