Ни один из ответов не работал для меня, так что я думал, что я разделю мое решение.
Загрузите функцию handleScroller()
на document.ready()
. Когда я выполняю обновление на ul li
, я снова вызываю функцию handleScroller()
, чтобы slimScrollDiv снова уничтожился и снова был восстановлен. Я также установил высоту контейнера ul. Кажется, он работает неплохо. Вот пример моего кода:
CSS в style.css .scroller {высота: 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
});
}
ПРИМЕЧАНИЕ: Существует решение here, которое обертывает логику handleScroller()
вокруг setInterval()
. Я предлагаю держаться подальше от setInterval()
, если это возможно.
Вы могли бы сделать это в Fidle ?? – gidzior
Хорошо, дай мне немного времени! –
вот он: http://jsfiddle.net/HFdPq/ –