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

У меня есть div, и для того, чтобы сделать его более привлекательным, я использую SlimScroll jQuery plugin на этом div

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

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

Ответы

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

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

Ответ 4

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

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

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

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

Ответ 5

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

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

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

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

Ответ 6

Ни один из ответов не работал у меня, поэтому я решил поделиться своим решением.

Загружаю функцию handleScroller() на document.ready(). Когда я выполняю обновление в ul li, я снова вызываю функцию handleScroller(), чтобы slimScrollDiv мог быть уничтожен и снова восстановлен. Я также установил высоту контейнера ul. Кажется, он работает неплохо. Вот пример моего кода:

CSS в style.css .scroller {height: 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(), если это возможно.

Ответ 7

Чтобы включить slimscroll и отключить slimscroll $ ( '# Прокручивать') slimscroll ( "уничтожить" );.