Question

以下代码应该能够根据nanoscroller documentation触发pane和slider到适当的display css属性。但是，滚动器不会显示slider，直到我在浏览器中执行某些操作，例如按F12启动firebug或右键单击内部元素进行检查。什么可能出错？

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

Answer 1

至少在版本v0.7.4上看起来如果用参数调用nanoScroller()，插件的初始化可能会失败，最重要的是动态内容。

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

这里的解决方法是：在没有参数的情况下先调用nanoScroller()，如果需要参数，请在调用之后再调用它。

$('.nano').nanoScroller();
$('.nano').nanoScroller({ alwaysVisible: true, scroll: 'top' });

Answer 2

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

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

在另一种情况下如果内容没有显示，您希望确保具有类nano的元素的正确的高度。

Answer 3

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

我如何解决它：

使用/不使用.ready处理程序

而不是调用函数

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

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

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

Answer 4

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

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

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

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

Answer 5

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

Answer 6

我的问题与你的问题相同。也许问题出现是因为我将nanoScroller函数应用于动态生成的内容。我的解决方案是添加以下行：

$（ “窗格 ”）的CSS（“ 显示”， “块”）。 $（ “滑块 ”）的CSS（“ 显示”， “块”）;

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

风格= “显示：无”

我希望这对你有所帮助。

Answer 7

请更正代码（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();
}

Answer 8

如果您的内容调整大小，此解决方案在所有情况下都会像魅力一样工作。试试这个：

$('your div id here').mouseover(function(){
     $('.nano').nanoScroller();
});

NanoScroller不会触发自身

8 个答案: