0

我想在很多 div 上使用相同的滚动条，但似乎我总是遇到同样的错误：在 tinyscroll.js 文件中 j.obj[0] 未定义。任何线索我应该做什么？tinyscroll.js 在 jQuery 之后和我调用 .tinyscrollbar() 的 js 文件之前加载；

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>
4

1 回答 1

1

感谢 zgood 和 Archer 的帮助

为了总结这个问题的答案，这一切都归结为两个重要的部分：

  1. 仔细查看如何加载 Jquery Tiny 滚动条和http://baijs.nl/tinyscrollbar/，因为很容易错过您必须拥有的 wrap-atound div（使用正确的类名等）才能完成这项工作。

  2. Tiny Scrollbar 只能读取 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();
    });

}

另外，不要忘记 .tinyscrollbar(); 当 div 隐藏时将不起作用，因此您必须在其可见时运行 scrollify() 函数。

编辑

CSS 代码对于班级中的每个人都必须相同，而不仅仅是在 Tiny Scrollbar 页面上的 #scrollbar1。我做了一些自定义调整，但我的 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; }
于 2013-09-18T18:41:02.943 回答