我正在尝试使用tinyscrollbar插件http://baijs.nl/tinyscrollbar/
像这样：$('#nvl2 .content').html( '<div class="scrollbar">'+
'<div class="track">'+
'<div class="thumb"><div class="end"></div></div>'+
'</div>'+
'</div>'+
'<div class="viewport">'+
'<div class="overview">' +$('#nvl2 .content').html()+'</div>'+
'</div></div>' ).attr('id','sc2');
$('#sc2').tinyscrollbar();
这是在ajax调用之前调用的，它在＃nvl2中加载新内容但是tinyscroll没有启用而firebug没有跳转任何错误
的CSS：
/**************/
/* Tiny Scrollbar */
#nvl1 { }
#nvl1 .viewport { ¡overflow: hidden; position: relative; width:100% }
#nvl1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#nvl1 .scrollbar{ background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#nvl1 .track { background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
#nvl1 .thumb { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#nvl1 .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#nvl1 .disable { display: none; }
/**************/
/* Tiny Scrollbar */
#nvl2{ }
#nvl2 .viewport { ¡overflow: hidden; position: relative; width:100% }
#nvl2 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#nvl2 .scrollbar{ background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#nvl2 .track { background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
#nvl2 .thumb { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#nvl2 .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#nvl2 .disable { display: none; }
这是ajax调用完成后的内容示例
<div class="level" id="nvl2" style="left: 540px; display: block; height: 663px; z-index: 1;">
<div class="content" style="display: block;">
<div class="scrollbar">
<div class="track">
<div class="thumb">
<div class="end">
</div>
</div>
</div>
</div>
<div class="viewport">
<div class="overview">
<span class="close"></span>
<div class="contentHeader">
<div class="contentHeaderImg">
<img alt="redLevel" class="attributeImgLogo" src="img/cnt/redLevel.png">
</div>
<h2>Red Level Glove</h2>
<h4>The boutique hotel within the hotel</h4>
</div>
<div class="contentImg">
<img class="attributeImg" alt="drink" src="img/cnt/redLevelDrink.jpg">
</div>
<div class="contentTxt">
<p>
Red Level Lounge: Exclusive VIP Red Level Lounge featuring private check-in with a welcome glass of Veuve Clicquot Grande Dame champagne.
</p>
<p>
The Red Level Family Concierge experience is offered in select resort locations. Luxuries include separate VIP check-in lounge exclusively for Family Concierge clients, designated family pools, premium suite accommodations designed with families in mind, upgraded ensuite amenities.
</p>
</div>
</div>
</div>
</div>
<div class="extra" style="width: 418px;">
</div>
</div>
在ajax调用和tinyscrollbar init exectuted之前：
<div class="level" id="nvl2" style="left: 540px; display: block; height: 663px; z-index: 1;">
<div class="content" style="display: block;">
<span class="close"></span>
<div class="contentHeader">
<div class="contentHeaderImg">
<img alt="redLevel" class="attributeImgLogo" src="img/cnt/redLevel.png">
</div>
<h2>Red Level Glove</h2>
<h4>The boutique hotel within the hotel</h4>
</div>
<div class="contentImg">
<img class="attributeImg" alt="drink" src="img/cnt/redLevelDrink.jpg">
</div>
<div class="contentTxt">
<p>
Red Level Lounge: Exclusive VIP Red Level Lounge featuring private check-in with a welcome glass of Veuve Clicquot Grande Dame champagne.
</p>
<p>
The Red Level Family Concierge experience is offered in select resort locations. Luxuries include separate VIP check-in lounge exclusively for Family Concierge clients, designated family pools, premium suite accommodations designed with families in mind, upgraded ensuite amenities.
</p>
</div>
</div>
<div class="extra" style="width: 418px;">
</div>
</div>
可以在这里测试：http://toniweb.us/gm知道我缺少什么吗？
答案 0 :(得分：2)
你是什么意思
...).attr('sc2');
吗？ 带有一个参数的函数.attr（）是属性值的getter。你想为元素设置id吗？如果这是您的想法，那么更好的方法是将此ID插入此HTML代码：
<div id="sc2" class="scrollbar">
当执行与tinyScrollbar初始化一致时，在页面上：
$('#sc2').tinyscrollbar();
没有id为“sc2”的元素，这就是为什么滚动条没有显示而且在firebug中没有错误的原因。
答案 1 :(得分：0)
尝试使用tinyscrollbar_update（）方法。当我必须在ajax请求上更改内容时，我遇到了问题。它对我很好。 http://baijs.nl/tinyscrollbar/
的完整文档