Question

我遇到了tinyscrollbar的问题，在第一页上加载并未显示视口中的所有内容（您可以在此处查看问题：pnsilva.net）。

以下是我创建滚动条并加载内容的方法：

$(window).load(function(){

    $('#scrollbar1').tinyscrollbar();
    $("#scrollbar1 .viewport .overview p").load("/favorites", function() {
        $('#scrollbar1').tinyscrollbar_update();    
    });

    $('#scrollbar2').tinyscrollbar();
    $("#scrollbar2 .viewport .overview p").load("/books", function() {
        $('#scrollbar2').tinyscrollbar_update();
    });

    $('#scrollbar3').tinyscrollbar();
    $("#scrollbar3 .viewport .overview p").load("/music", function() {
        $('#scrollbar3').tinyscrollbar_update();
    });

    $('#scrollbar4').tinyscrollbar();
    $("#scrollbar4 .viewport .overview p").load("/photos", function() {
        $('#scrollbar4').tinyscrollbar_update();
    });

    $('#scrollbar5').tinyscrollbar();
    $("#scrollbar5 .viewport .overview p").load("/code", function() {
        $('#scrollbar5').tinyscrollbar_update();
    });

});

以下是css的外观：

#scrollbar1 { float:left; width: 20%; height:100%; }
#scrollbar1 .viewport { width:97%; height: 100%; overflow: hidden; }
#scrollbar1 .overview { position: relative; float:left; left: 10px; right:5px; top: 0; color:#fff; font-family:Verdana, Geneva, sans-serif; font-size:13px; line-height:20px; }
#scrollbar1 .thumb { background-color: #2D8CDA; width:2px; }
#scrollbar1 .scrollbar { position: relative; float: right; width: 2px; }
#scrollbar1 .track { background-color: #D8EEFD; height: 100%; width:2px; position: relative; }
#scrollbar1 .thumb { height: 20px; width: 2px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#scrollbar1 .disable{ display: none; }

为什么会发生这种情况的任何想法？

谢谢

Answer 1

你应该给你的图像宽度和高度

Answer 2

我遇到了类似的问题，并意识到问题是“$（window）.load”或“$（document）.ready”对于tinyscrollbar来说太快了。如果我手动调用“$（'＃scrollbar'）。tinyscrollbar_update（）;”在控制台中，它会显示所有内容。为了解决这个问题，我设置了一个计时器来在文档就绪后几毫秒更新滚动条。

我为你修改了代码（未经测试）：

$(document).ready(function(){

    $('#scrollbar1').tinyscrollbar();
    $("#scrollbar1 .viewport .overview p").load("/favorites", function() {
        refreshScrollbar($('#scrollbar1'), 10, 250);
    });

    $('#scrollbar2').tinyscrollbar();
    $("#scrollbar2 .viewport .overview p").load("/books", function() {
        refreshScrollbar($('#scrollbar2'), 10, 250);
    });

    $('#scrollbar3').tinyscrollbar();
    $("#scrollbar3 .viewport .overview p").load("/music", function() {
        refreshScrollbar($('#scrollbar3'), 10, 250);
    });

    $('#scrollbar4').tinyscrollbar();
    $("#scrollbar4 .viewport .overview p").load("/photos", function() {
        refreshScrollbar($('#scrollbar4'), 10, 250);
    });

    $('#scrollbar5').tinyscrollbar();
    $("#scrollbar5 .viewport .overview p").load("/code", function() {
        refreshScrollbar($('#scrollbar5'), 10, 250);
    });

});

// To fix scrollbar not showing all content
function refreshScrollbar(scrollbar, counter, delay) {
    if (counter > 0) {
        counter--;
        scrollbar.tinyscrollbar_update('relative');
        setTimeout(function(){
            refreshScrollbar(scrollbar, counter, delay);
        }, delay);
    }
}

Answer 3

我认为问题在于此插件不喜欢流体高度视口（即100％）。您可以通过在页面加载时设置视口的大小来解决此问题，然后调用插件。

$(document).ready(function() {
    var viewport_size = $(window).height();
    $('.viewport').css('height',viewport_size);
    $('#scrollbar2').tinyscrollbar();
});

这样，视口具有要使用的插件的设置大小。如果窗口重新调整大小，您还需要再次设置视口大小。

在撰写此答案时，我相信有更好的插件可以满足您的需求。查看Malihu Custom Scrollbar plugin。这个插件允许你像你想要的那样拥有流畅的滚动视口。它还提供了更好的选项和样式。

jQuery tinyscrollbar - 没有显示所有内容

3 个答案: