Question

我正在使用niceScroll jQuery插件替换溢出<div>'s中的常见浏览器滚动条。该插件运行良好，但我无法使其工作并显示滚动轨道始终（即使内容未超过<div>边界）。我的最终配置是：

$(document).ready(function () {
    $(".div-wrapper").niceScroll({
        cursorcolor: "#333",
        cursoropacitymin: 0.3,
        background: "#bbb",
        cursorborder: "0",
        autohidemode: false,
        cursorminheight: 30
    });
};

我试图解雇$(".div-wrapper").getNiceScroll().show()，但它似乎也不起作用。

感谢任何帮助，谢谢

Answer 1

首先，你最后有缺少括号 - 这可能是你的问题吗？

将autohidemode设置为false仅表示当用户停止滚动时它不会消失，然后在滚动时再次出现。不幸的是，如果内容没有溢出，这并不意味着它是可见的。

作为一种解决方法，您可以尝试在调用.niceScroll（）之后明确显示id = ascrail2000的元素：

$(document).ready(function () {
    $(".div-wrapper").niceScroll({
        cursorcolor: "#333",
        cursoropacitymin: 0.3,
        background: "#bbb",
        cursorborder: "0",
        autohidemode: false,
        cursorminheight: 30
    });
    $('#ascrail2000').show();
});

在最后一行中看到遗失的部分

您可能还需要使其子元素可见：

    $('#ascrail2000 *').show();

（确保元素的id在你的情况下是ascrail2000。）

更新：正如veritas指出的那样，使用更通用的选择器div[id^='ascrail']代替#ascrail2000使其适用于一页上的多个nicescroll，所以上面可以使用JavaScript完成：

    $("div[id^='ascrail']").show();

或在CSS中：

    div[id^='ascrail'] { display: block; }

或如果以上情况不起作用：

    div[id^='ascrail'] { display: block !important; }

这不是最优雅的解决方案，但我担心这是解决此问题的唯一方法，因为nicescroll插件没有选择该行为的选项。幸运的是，nicescroll是开源的available on GitHub所以可以轻松地将它分叉并在GitHub上添加这样的选项或post a feature request。

Answer 2

$(".div-wrapper").niceScroll({
    cursorcolor: "#333",
    cursoropacitymin: 0.3,
    background: "#bbb",
    cursorborder: "0",
    autohidemode: false,
    cursorminheight: 30
});

Answer 3

我假设如果内容没有溢出边界框，则niceScroll不会执行任何操作，这可能是您的问题。请记住，niceScroll不是＆gt; $溢出：滚动; ...没有挖掘插件本身我不能确定但我会假设它内置了一个检查以测试内容是否需要滚动，并且如果没有，那么该功能将以静默方式退出。

Answer 4

我通过谷歌搜索看到这个答案，即使它已经老了，如果有人看到这个寻求答案，这是我的工作解决方案：

        $('#ascrail2000.nicescroll-rails').show();
        $('#ascrail2000.nicescroll-rails div').height('300px').show();

我需要为“bar”div设置一个任意高度，因为默认情况下它的高度为：0px，即使你显示它，你也看不到任何东西。我想我们可以做得更好，用窗户尺寸计算一个好的高度，但我不需要：）

Answer 5

立即访问2018年7月2日，并且运行版本 jquery.nicescroll v3.7.6 Source Link

添加autohidemode: false后，对我来说一切正常。

$("#example").niceScroll({
   autohidemode: false       // it make nicescroll scroll bar visible all time
});

始终显示niceScroll导轨

5 个答案: