Removing slimscroll from div

Question

I got a div, and to make it fancier I use the SlimScroll jQuery plugin on that div

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

now there's a moment when I want this div not to have this property anymore (but to have the browser default scrollbar). How can I remove the slimscroll?

score 16 · Answer 1 · answered Mar 12 '14 at 07:43

16

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

answered Mar 12 '14 at 07:43

ink

619
1
7
22

Was it always there or they added this function in a recent update? – Andrea Silvestri Mar 12 '14 at 09:58
Can't be sure, but I think it was added after your question. It works for version 2 and newer. – ink Mar 12 '14 at 13:13
version 2 of jquery or the plugin? – Andrea Silvestri Mar 29 '14 at 11:31
The SlimScroll plugin's version. – ink Mar 31 '14 at 06:33
This will leak memory, because the event subscriptions aren't disposed – Jan Willem B Mar 03 '16 at 12:59
@ink The plugin's version is still only 1.3.8 five years later, I'm not sure how you have version 2? – Philip Stratford Apr 01 '19 at 16:18

score 6 · Accepted Answer · answered Aug 09 '13 at 08:52

6

I made this function which works great in my case

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

answered Aug 09 '13 at 08:52

Andrea Silvestri

992
4
13
38

could you do this in Fidle ?? – gidzior Jan 08 '14 at 23:30
Ok, give me some time! – Andrea Silvestri Jan 10 '14 at 11:48
1

This will leak memory, because the event subscriptions aren't disposed – Jan Willem B Mar 03 '16 at 12:57

score 6 · Answer 3 · edited Feb 25 '16 at 15:11

6

I did this and it works better than any other solution I saw..

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

edited Feb 25 '16 at 15:11

Qirel

21,424
7
36
54

answered Feb 25 '16 at 14:54

Daniel Maiochi

337
3
13

ShankarSangoli · Answer 4 · 2012-02-05T21:03:24.647

2

Try calling destroy method on it, hopefully it supports.

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

You can also remove all inline styles applied by the plugin

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

edited Feb 05 '12 at 21:03

answered Feb 05 '12 at 19:28

ShankarSangoli

67,648
11
84
121

unfortunately the only thing it does is destroying my settings and set the default ones... – Andrea Silvestri Feb 05 '12 at 20:16
ok I'm noticing that the plugin creates a wraps $('#scrollable') with a div and it styles it. So I have to remove that wrapper (which it just has a class) but keep my $('#scrollable') which is in it... – Andrea Silvestri Feb 05 '12 at 21:01
4

I made this function which works great in my case `function destroySlimscroll(objectId) { $("#"+objectId).parent().replaceWith($("#"+objectId)); }` – Andrea Silvestri Feb 05 '12 at 21:38
Thank you... I forgot to answer myself. Vote up when I do, please =D – Andrea Silvestri Aug 09 '13 at 08:52

score 1 · Answer 5 · answered Jan 24 '16 at 07:04

I was having trouble doing this in a large SPA app. scroll's just kept piling up on top of each other, even with calling the destroy method of slimScroll.

So here's my solution.

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

This code runs and destroys all scrolls, then the controllers are free to bind scrolls as needed.

yardpenalty.com · Answer 6 · 2016-09-14T19:18:13.200

None of the answers worked for me so I thought I would share my solution.

I load a function called handleScroller() on document.ready(). When I perform an update on the ul li I call the handleScroller() function again in order for the slimScrollDiv to become destroyed and rebuilt again. I set the height of the ul container also. It seems to be working quite well. Here is a sample of my code:

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

HTML/Bootsrap menu

<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
   });
}

NOTE: There is a solution here that wraps the handleScroller() logic around a setInterval(). I suggest staying away setInterval() if possible.

score 0 · Answer 7 · answered Apr 19 '17 at 07:23

0

To enable slimscroll and disable slimscroll $('#scrollable').slimscroll("destroy");

answered Apr 19 '17 at 07:23

Jinka Jagadeesh

21
1

Removing slimscroll from div

7 Answers7