总是显示 niceScroll rail答案

【问题标题】：Always display niceScroll rail总是显示 niceScroll rail
【发布时间】：2012-07-24 10:21:45
【问题描述】：

我正在使用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()，但它似乎也不起作用。

任何帮助将不胜感激，谢谢

【问题讨论】：

标签： javascript jquery jquery-plugins nicescroll

【解决方案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。

【讨论】：

谢谢，但我的问题打错了：/ 我无法在 javascript（或 CSS）中设置硬编码的 #ascrail... 值，因为我可以在页面上滚动 n。但是+1 的努力和部分好的答案。
CSS 选择器 div[id^='ascrail'] { display:block; } 是解决这个问题的 CSS 解决方案，但我更喜欢其他的。
@veritas：恐怕目前没有更好的解决方案，但您可以随时发布功能请求以使其更容易 - 请参阅我的更新答案。
我需要一直显示滚动条。现在它只在鼠标悬停时显示。任何人都可以帮助我。

【解决方案2】：

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

【讨论】：

【解决方案3】：

我假设如果内容没有溢出边界框，niceScroll 不会做任何事情，这可能是你的问题。请记住， niceScroll 不是 >$overflow: scroll;... 如果不深入研究插件本身，我无法确定，但我会假设它内置了一个检查来测试内容是否需要滚动，如果它没有，然后函数静默退出。

【讨论】：

插件在 DOM 中创建滚动 divs 并将它们的值设置为 display:none; 所以它确实有效。

【解决方案4】：

我通过谷歌搜索看到了这个答案，即使它很旧，如果有人看到这个正在寻找答案，这就是我的工作解决方案：

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

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

【讨论】：

【解决方案5】：

现在 07/02/2018 和工作版本 jquery.nicescroll v3.7.6 Source Link

在添加autohidemode: false 后，它对我来说工作正常。

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

【讨论】：