超薄滚动条不可见

slimscroll scrollbar is not visible

本文关键字:滚动条      更新时间:2023-09-26

我正在使用超薄滚动插件,但我遇到滚动条不可见的问题。

我的代码:

 <script type="text/javascript" charset="utf-8">
    // JavaScript Document
    $(document).ready(function()
    {
        $("#formActions").slimScroll({
            height: '400',
            color: '#00f',
            alwaysVisible: true
        });
    });
</script>

.HTML:

<div class="content" style="height:400px;">
<div id="formActions">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus diam, gravida sit amet lobortis vel, vehicula in nisl. Mauris commodo tristique adipiscing. Ut ac odio ut leo molestie rhoncus id ac sem. Duis interdum neque ligula, aliquet scelerisque urna tincidunt sit amet. Donec dapibus ultrices velit. Aliquam eleifend pretium neque, in adipiscing tortor malesuada sit amet. Proin mattis erat quis hendrerit sodales. Ut tincidunt consequat lorem, ut sodales purus gravida nec. Morbi mollis dolor quis dapibus lacinia. Nulla ultricies velit ut porta varius. Vestibulum ac egestas lacus.
Praesent id ultrices felis, ut porttitor nunc. Maecenas quis leo laoreet, laoreet enim eget, euismod libero. Morbi viverra laoreet mollis. Mauris sit amet ultrices sapien. Praesent et malesuada purus, et ornare orci. Mauris accumsan enim tincidunt, eleifend enim vitae, dictum enim. Duis eleifend vehicula metus, vitae eleifend leo imperdiet id. Quisque hendrerit venenatis quam eget egestas. Suspendisse faucibus in sapien sit amet malesuada. Vivamus id neque varius, volutpat velit id, viverra ligula. Duis convallis nisl eu sapien fringilla porta. Curabitur cursus nisl quis tortor porttitor, non volutpat sapien rhoncus. Maecenas tincidunt sem ligula. Duis tellus enim, volutpat sed mollis eu, faucibus sit amet leo. Maecenas volutpat mauris dolor, sed auctor ligula aliquam eget. Proin tincidunt ornare lacus, ac egestas mauris scelerisque sit amet.
Mauris sit amet diam magna. Sed rhoncus erat ac tortor imperdiet porta. Proin et nulla sed quam posuere pulvinar quis id mi. Vestibulum mollis elementum metus et sagittis. Nunc vel luctus neque. Mauris ac neque orci. Sed suscipit augue quis convallis vulputate. Duis laoreet libero a eros rhoncus, ac congue libero egestas. Mauris ac purus eget urna convallis aliquam a sit amet quam. Mauris mi erat, egestas nec dignissim sed, vulputate sit amet dolor. Pellentesque auctor nibh eget diam rutrum dictum. Praesent porttitor orci ante, ac hendrerit lacus hendrerit vel. Suspendisse sodales est sed ipsum mollis, eget tempus tellus laoreet. Phasellus vehicula congue sem at mattis. Vestibulum in libero tincidunt, tempus odio accumsan, viverra urna. Cras molestie vel sem nec laoreet.</div>
</div>

当我在 200 上的 slimScroll 函数中设置高度时,它将起作用 所以看起来该功能有效,但滚动条仍然没有显示。当我在浏览器中查看源代码时,我看到了容器slimScrollDiv。我还看到类 slimScrollBar 的高度没有设置。也许这会导致问题。

有什么想法吗?

如果您使用的是动态数据,请确保在调用 slimScroll 函数之前,您的 DOM 中填充了数据。如果是这种情况,请使用 setTimeout 和 0。

例如:

setTimeout(function () {
    $("#formActions").slimScroll({
        height: '400',
        color: '#00f',
        alwaysVisible: true
    });
},0);

对于遇到此问题的其他任何人,您需要通过设置 display:block 来覆盖 .slimScrollBar 类。

.slimScrollBar{display:block !important;}