我得到了一个div,为了让它更漂亮,我在这个div 上使用了SlimScroll jQuery插件
$('#scrollable').slimscroll({
color: '#900',
size: '8px',
width: '300px',
height: '500px'
});
现在,我希望这个div不再有这个属性(而是有浏览器默认的滚动条)。如何删除slimscroll
?
$("#scrollable").slimScroll({destroy: true});
我制作了这个函数,在我的中效果很好
function destroySlimscroll(objectId) {
$("#"+objectId).parent().replaceWith($("#"+objectId));
}
我做到了,它比我看到的任何其他解决方案都能更好地工作。。
$(".slimScrollBar,.slimScrollRail").remove();
$(".slimScrollDiv").contents().unwrap();
试着对其调用destroy
方法,希望它能支持。
$('#scrollable').slimscroll("destroy");
您还可以删除插件应用的所有内联样式
$('#scrollable').attr('style', '');
我在一个大型SPA应用程序中遇到了问题。即使调用了slimScroll的destroy方法,卷轴也一直堆积在一起。
这是我的解决方案。
$('.slimScrollBar,.slimScrollRail').remove();
$('.slimScrollDiv').each(function(){
$(this).replaceWith($(this).children());
})
此代码运行并销毁所有卷轴,然后控制器可以根据需要自由绑定卷轴。
没有一个答案对我有效,所以我想分享我的解决方案。
我在document.ready()
上加载了一个名为handleScroller()
的函数。当我对ul li
执行更新时,我再次调用handleScroller()
函数,以便slimScrollDiv被销毁并再次重建。我还设置了ul容器的高度。它似乎运行得很好。这是我的代码示例:
style.CSS中的CSS.滚动条{高度:182px;}
HTML/Bootsrap菜单
<ul class="nav navbar-nav pull-right">
<!-- slimScroll notifications -->
<li id="header_notification_bar" class="hidden dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="fa fa-bell"></i>
<span class="badge">
6
</span>
</a>
<ul id="notifications" class="dropdown-menu extended"></ul>
</li>
<!--other menu items ... //-->
</ul>
JS/jQuery
$(document).ready(function(){
handleScroller();
VisitedHandler();
});
function VisitedHandler(){
$("#notifs li").on("click",function(){
$("#notifications").html('');
$('ul#notifs').html('');
$("#notifications").append('<li><ul id="notifs" class="dropdown-menu-list scroller"></li>');
var ul = $('#notifs');
ul.append('<li id="general">New Announcement</li>')
ul.append('<li id="enhancements">New Page Enhancements</li>');
handleScroller();
});
}
function handleScroller(){
$("#notifs").slimscroll({destroy:true});
var notes = $("#notifs");
var height = notes.css("height");
if($('#notifs .nws').size() < 5 && $('#notifs .nws').size() != 0)
height = $('#notifs .nws').size() * 40 + 22;
else
height = 182;
//no Notifications
if($('#notifs .nws').size() == 0)
height = 0;
$("#notifs").slimScroll({
size: '10px',
color: '#a1b2bd',
railColor:'#272727',
position: 'right',
height: height,
alwaysVisible: true,
railVisible: true,
disableFadeOut: true
});
}
注意:这里有一个解决方案,它将handleScroller()
逻辑封装在setInterval()
周围。如果可能的话,我建议远离setInterval()
。
启用和禁用slimroll$('#scrollable').slimscroll("destroy");