Javascript 微小滚动条问题j.obj[0]未定义

我希望在很多div上都有相同的滚动条，但似乎我总是遇到相同的错误： j、 在tinyscroll.js文件中，obj[0]未定义。 我该怎么做有什么线索吗？tinyscroll.js在jQuery之后和之前加载 我的js文件，其中我调用.tinyscrollbar（）

JS:

HTML:

感谢zgood和Archer的帮助

要总结这个问题的答案，可以归结为两个重要方面：

仔细检查一下，因为很容易错过完成这项工作所必须的wrap-atound div（使用正确的类名等等）

小小的滚动条只能读取ID。因此，如果您像我一样获得了动态内容，那么您必须在类中循环并创建设置.tinyscrollbar（）的ID；对

这是我的代码：

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

}

还有，别忘了；div隐藏时不起作用，因此必须在可见时运行scrollify（）函数

编辑

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

---

尝试使用

$（文档）.ready

和not

$（窗口）.load

。使用自定义滚动条插件和动态content@zgood-div内容添加到服务器端，它不是真正的动态内容。另外，

document.ready

和

window.load

在这个实例中没有区别，因为它们都是在加载DOM后触发的。@Rhyder也许这会有帮助。。。我试过了。同样的结果，尽管错误在jQuery文件中，而不是在tinyscroll.js中：j.obj[0]是未定义的，所以您有一个视口和一个滚动条吗？只是你没有在上面表现出来。

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

}

.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; }