[英]jQuery tinyscrollbar - not showing all content
I am having an issue with tinyscrollbar where on the first page load not all content in the viewport is shown (you can have a look at the problem here: pnsilva.net ). 我在tinyscrollbar上遇到问题,其中在第一页加载时并未显示视口中的所有内容(您可以在这里查看问题: pnsilva.net )。
Here's how I'm creating the scrollbars and loading the content: 这是我创建滚动条并加载内容的方法:
$(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();
});
});
And here's how the css looks: 这是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; }
Any ideas why this might be happening? 任何想法为什么会发生这种情况?
Thank you 谢谢
您应该给图像一个宽度和高度
I had a similar problem and realize that the problem was that “$(window).load” or “$(document).ready” were firing too soon for the tinyscrollbar. 我有一个类似的问题,并且意识到问题在于“ $(window).load”或“ $(document).ready”对于tinyscrollbar触发得太早了。 If I manually call “$('#scrollbar').tinyscrollbar_update();” in the console, it shows all the content. 如果在控制台中手动调用“ $('#scrollbar')。tinyscrollbar_update();”,它将显示所有内容。 To fix this, I set a timer to update the scroll bar some milliseconds after the document ready. 为了解决这个问题,我设置了一个计时器,以便在文档准备就绪后数毫秒内更新滚动条。
I adapted the code for you (not tested): 我为您改编了代码(未经测试):
$(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);
}
}
I think the problem is that this plugin does not like fluid height viewports (ie 100%). 我认为问题在于此插件不喜欢流体高度视口(即100%)。 You can get around this by setting your viewport's size on page load and then call the plugin. 您可以通过在页面加载时设置视口大小来解决此问题,然后调用插件。
$(document).ready(function() {
var viewport_size = $(window).height();
$('.viewport').css('height',viewport_size);
$('#scrollbar2').tinyscrollbar();
});
This way the viewport has a set size for the plugin to use. 这样,视口就可以为插件使用设置大小。 You will also need to set the viewport size again if the window gets re-sized. 如果调整窗口大小,则还需要再次设置视口大小。
As of writing this answer, I believe there are better plugins for your needs. 在撰写此答案时,我相信有更好的插件可以满足您的需求。 Check out Malihu Custom Scrollbar plugin . 查看Malihu自定义滚动条插件 。 This plugin allows you to have fluid scrolling viewports just like you want. 使用此插件,您可以根据需要拥有流畅的滚动视口。 It also offers a better array of options and styling. 它还提供了更好的选项和样式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.