javascript - 始终显示 niceScroll rail

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

查看最后一行中缺少的 PAREN

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

    $('#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所以可以很容易地 fork 它并添加这样的选项或 post a feature request在 GitHub 上。