Удаление slimscroll из DIV

Question

Я получил DIV, и сделать его любителю я использую SlimScroll jQuery plugin на этой DIV

$('#scrollable').slimscroll({ 
    color: '#900', 
    size: '8px', 
    width: '300px', 
    height: '500px' 
}); 

теперь есть момент, когда я хочу, чтобы это Див не больше, чтобы это свойство (но иметь панель прокрутки по умолчанию браузера). Как удалить slimscroll?

Answer 1

я сделал эту функцию, которая прекрасно работает в моем случае

function destroySlimscroll(objectId) { 
    $("#"+objectId).parent().replaceWith($("#"+objectId)); 
} 

Answer 2

Попробуйте позвонить destroy метод, надеюсь, он поддерживает.

$('#scrollable').slimscroll("destroy"); 

Вы также можете удалить все встроенные стили, применяемые плагином

$('#scrollable').attr('style', ''); 

Answer 3

$("#scrollable").slimScroll({destroy: true}); 

Answer 4

У меня была проблема, делая это в большом приложении SPA. прокрутки просто продолжали накапливаться друг над другом, даже при вызове метода destroy slimScroll.

Итак, вот мое решение.

$('.slimScrollBar,.slimScrollRail').remove(); 
$('.slimScrollDiv').each(function(){ 
    $(this).replaceWith($(this).children()); 
}) 

Этот код работает и уничтожает все свитки, то контроллеры могут свободно связываться прокручивается по мере необходимости.

Answer 5

Я сделал это, и она работает лучше, чем любое другое решение я видел ..

$(".slimScrollBar,.slimScrollRail").remove(); 
$(".slimScrollDiv").contents().unwrap(); 

Answer 6

Ни один из ответов не работал для меня, так что я думал, что я разделю мое решение.

Загрузите функцию 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(), если это возможно.

Answer 7

Чтобы включить slimscroll и отключить slimscroll $ ('# scrollable'). Slimscroll ("destroy");