Rimozione slimscroll da div

Question

Ho un div, e per renderlo più elaborato utilizzare la SlimScroll jQuery plugin su quel div

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

ora c'è un momento in cui voglio che questo non div di avere più questa struttura (ma per avere la barra di scorrimento predefinita del browser). Come posso rimuovere lo slimscroll?

Answer 1

Ho fatto questa funzione che funziona bene nel mio caso

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

Answer 2

Prova a chiamare il metodo destroy su di esso, si spera che supporti.

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

È possibile anche rimuovere tutti gli stili inline applicate dal plugin

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

Answer 3

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

Answer 4

stavo avendo problemi facendo questo in una grande app SPA. gli scroll si sono accumulati uno sopra l'altro, anche chiamando il metodo destroy di slimScroll.

Quindi ecco la mia soluzione.

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

Questo codice viene eseguito e distrugge tutte le pergamene, poi i controllori sono liberi di legarsi pergamene, se necessario.

Answer 5

ho fatto questo e funziona meglio di qualsiasi altra soluzione che ho visto ..

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

Answer 6

Nessuna delle risposte ha lavorato per me, così ho pensato di condividere la mia soluzione.

Carico una funzione denominata handleScroller() su document.ready(). Quando eseguo un aggiornamento su ul li, richiamo di nuovo la funzione handleScroller() in modo che lo slimScrollDiv venga distrutto e ricostruito di nuovo. Ho anche impostato l'altezza del contenitore ul. Sembra che funzioni abbastanza bene. Ecco un esempio del mio codice:

CSS in style.css .scroller {height: 182px;}

HTML/menù 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 
    }); 
} 

NOTA: C'è una soluzione here che avvolge la logica handleScroller() attorno a uno setInterval(). Suggerisco di stare lontano setInterval() se possibile.

Answer 7

Per abilitare slimscroll e disabilitare slimscroll $ ('# scrollable'). Slimscroll ("destroy");