Question

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

我的代码：

 <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>

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

有什么想法吗？

Answer 1

如果您使用的是动态数据，请确保在调用slimScroll函数之前使用数据填充DOM。如果是这种情况，请将setTimeout与0一起使用。

例如：

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

Answer 2

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

实施例

.slimScrollBar{display:block !important;}

slimscroll滚动条不可见

2 个答案: