jQuery tinyscrollbar - 不显示所有内容

我有一个tinyscrollbar的问题，在第一页加载不是所有内容在视口中显示（你可以看看这里的问题：pnsilva.net）。jQuery tinyscrollbar - 不显示所有内容

下面是我如何创建滚动条和加载内容：

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

任何想法，为什么这可能发生？

谢谢

来源

2011-08-28 pnsilva

还要将代码的第一行从$（window）.load（function（）{'更改为'$（function（）{'，以便您将使用DOM ready事件。 –

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

来源

2011-09-15 06:33:57 Baijs

我也有类似的问题，并意识到的问题是，“$（窗口）.load”或“$（文件）。准备就绪“为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); 
    } 
}

来源

2012-04-20 17:46:10

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

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

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

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

来源

2013-09-04 17:14:22 TheCarver

jQuery tinyscrollbar - 不显示所有内容

回答

相关问题