Tiny Scrollbar issue j.obj [0] undefined

Question

Я хочу, чтобы те же полосы прокрутки на большом количестве div, но мне кажется, что я получаю ту же ошибку все время: j.obj [0] не определено, в tinyscroll.js файл. Любой ключ к тому, что я должен делать? Tinyscroll.js загружается после jQuery и до моего js-файла, где я вызываю .tinyscrollbar();

JS:

$(window).load(function(){ 
if ($("#scrollbar1")) 
{ 
$("#scrollbar1").tinyscrollbar(); 
$("#scrollbar1").tinyscrollbar_update(); 
} 
}); 

HTML:

<div id="scrollbar1" class="prod_minitext"><p> 
<?php echo $post_naringsvarde; ?> 
</p></div> 

Answer 1

Благодаря zgood и Арчер за помощь

Чтобы summerize ответ на эту проблему, все это сводилось к двум важным бит :

1. Отъезд How to load Jquery Tiny scrollbar и http://baijs.nl/tinyscrollbar/ ЗАКРЫТЬ, потому что легко пропустить теги, которые вы должны иметь (с правильным именем класса и т. Д.), Чтобы сделать эту работу.

2. Tiny Scrollbar может считывать только идентификаторы. Поэтому, если у вас есть динамический контент, как я, вам нужно пройти через класс и создать идентификаторы, которые вы установили .tinyscrollbar(); к.

Это мой код:

$(document).ready(function() { 

    $('.prod_minitext').each(function(index) { 
    $(this).attr('id', 'scrollbar' + index); 
    }); 

    scrollify(); 

}); 

function scrollify() { 

$('.prod_minitext').each(function() { 
    var currentScroll = $(this).attr('id'); 
    console.log($('#' + currentScroll)); 
    $('#' + currentScroll).tinyscrollbar(); 
    $('#' + currentScroll).tinyscrollbar_update(); 
    }); 

} 

Кроме того, не забывайте, что .tinyscrollbar(); не будет работать, когда div скрыт, поэтому вы должны запустить функцию scrollify(), когда она будет видна.

EDIT

CSS-код должен быть одинаковым для всех в классе, а не только для # scrollbar1, как это на крошечном странице Scrollbar. Я сделал некоторые пользовательские настройки, но мой css выглядит так:

.prod_minitext { 
position:absolute; 
bottom:10px; 
right:0; 
width:320px; 
clear: both; 
} 
.prod_minitext .viewport { width: 320px; height: 60px; overflow: hidden; position: relative; } 
.prod_minitext .overview { list-style: none; position: absolute; left: 0; top: 0; } 
.prod_minitext .thumb .end, 
.prod_minitext .thumb { background-color: #A2D7E5; } 
.prod_minitext .scrollbar { top:60px; position: relative; float: right; width: 10px; } 
.prod_minitext .track { background-color: #D8EEFD; height: 100%; width:8px; position: relative; padding: 0 1px; } 
.prod_minitext .thumb { height: 20px; width: 8px; cursor: pointer; overflow: hidden; position: absolute; top: 0; } 
.prod_minitext .thumb .end { overflow: hidden; height: 5px; width: 8px; } 
.prod_minitext .disable{ display: none; } 
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }