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

Tiny Scrollbar issue j.obj[0] is undefined

本文关键字：未定义 obj 滚动条 问题      更新时间：2023-09-26

我想在很多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>

感谢 zgood 和 Archer 的帮助

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

  1. 查看如何加载 Jquery Tiny 滚动条并密切 http://baijs.nl/tinyscrollbar/，因为很容易错过您必须拥有的 wrap-atounddiv（具有正确的类名等）来完成这项工作。

  2. 小滚动条只能读取 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; }
相关文章：