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 - 不顯示所有內容

回答

相關問題