9

下面的代码应该能够根据nanoscroller 文档pane触发和slider适当的 css 属性。但是，滚动条不会显示，直到我在浏览器中执行一些操作，例如按 F12 启动萤火虫或右键单击内部元素以检查它。可能出了什么问题？displayslider

        $(".nano").nanoScroller({
        alwaysVisible: true,
        scroll: "bottom"    
    });
4

8 回答 8

5

至少在 v0.7.4 版本中，如果您nanoScroller()使用参数调用插件的初始化可能会失败，尤其是动态内容。

如果您正在使用，请确保在动画完成时完成$('#yourDiv').animate()调用。nanoScroller()如果您正在使用$.getJSON()，请在正确获取内容后执行此操作。如果您同时使用两者animate()并在两个事件之后getJSON()调用nanoScroller()，因为不知道哪个进程将首先完成，并且多次调用nanoScroller()不会破坏任何东西。

这里的解决方法是：首先nanoScroller()不带参数调用，如果需要参数，则在再次调用之后立即调用。

$('.nano').nanoScroller();
$('.nano').nanoScroller({ alwaysVisible: true, scroll: 'top' });
于 2013-10-16T16:05:23.373 回答
3

在某些情况下，比如我的，nanoScroller 需要首先知道图片的宽度/高度才能正常工作。

我如何修复它：

而不是调用函数，有/没有 .ready 处理程序，

$(".nano").nanoScroller({
    alwaysVisible: true,
    scroll: "bottom"     
});

尝试 .load 处理程序。现在 JQuery 仅在图片的宽度/高度已知时才加载 nanoScroller。

$(window).load(function () {
    $(".nano").nanoScroller({
        alwaysVisible: true,
        scroll: "bottom"     
    });
});
于 2013-07-01T12:24:25.587 回答
3

当nanoscroller 无法为元素正确初始化时，会出现此问题。

确保具有 nano 类的元素不在使用display:noneCSS 属性隐藏的父元素中。

在另一种情况下，如果内容没有显示，您需要确保已为具有类 nano 的元素设置了适当的高度。

于 2013-02-12T04:54:25.330 回答
2

如果要动态加载内容，则只需在加载内容后初始化 nanoScroller。

尝试将 nanoScroller 初始化包含在这样的 setTimeout 中。

setTimeout( function(){
    $('.nano').nanoScroller({ flashDelay: 1000 });
}, 0);

我有同样的问题，这为我解决了。

于 2014-07-08T21:06:06.227 回答
1

我的问题和你的一样。可能出现问题是因为我将 nanoScroller 函数应用于动态生成的内容。我的解决方案是添加以下行：

$(".pane").css("display","block"); $(".slider").css("display","block");

然后问题就消失了！如果您通过 Chrome 中的“检查元素”功能检查页面，您可以看到滚动条（滑块）存在的 .pane 类表明

样式=“显示：无”

我希望这对你有帮助。

于 2013-01-08T18:58:59.973 回答
1

确保在所有内容加载完毕后触发 Nanoscroller；例如，尝试将上面的代码放在页面底部，或者插入一些 JQuery 代码来检查页面是否已经完成加载内容。

于 2012-09-19T09:13:49.533 回答
0

请更正代码（jquery.nanoscroller.js）

if ((content.scrollHeight === content.clientHeight) || (this.pane.outerHeight(true) >= content.scrollHeight && contentStyleOverflowY !== SCROLL)) {
    this.pane.hide();
    /*this.isActive = false;*/
} else if (this.el.clientHeight === content.scrollHeight && contentStyleOverflowY === SCROLL) {
    this.slider.hide();
} else {
    this.slider.show();
}
于 2013-10-16T13:19:58.480 回答
0

无论您的内容是否调整大小，此解决方案在所有情况下都非常有用。尝试这个：

$('your div id here').mouseover(function(){
     $('.nano').nanoScroller();
});
于 2017-05-05T10:35:55.043 回答