jQuery 从 div 中删除 slimscroll

Removing slimscroll from div

提问by Andrea Silvestri

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

我有一个 div，为了让它更漂亮，我在那个 div 上使用了SlimScroll jQuery 插件

$('#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?

现在有一段时间我希望这个 div 不再有这个属性（但有浏览器默认滚动条）。我怎样才能删除slimscroll？

采纳答案by Andrea Silvestri

I made this function which works great in my case

我做了这个功能，在我的情况下效果很好

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

回答by ink

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

回答by Daniel Maiochi

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

我这样做了，它的效果比我看到的任何其他解决方案都要好。

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

回答by ShankarSangoli

Try calling destroymethod on it, hopefully it supports.

尝试调用destroy它的方法，希望它支持。

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

You can also remove all inline styles applied by the plugin

您还可以删除插件应用的所有内联样式

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

回答by r3wt

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.

我在大型 SPA 应用程序中无法执行此操作。即使调用了 slimScroll 的 destroy 方法，scroll 也会一直堆积在一起。

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.

此代码运行并销毁所有卷轴，然后控制器可以根据需要自由绑定卷轴。

回答by yardpenalty.com

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 liI 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:

我加载了一个名为handleScroller()on的函数document.ready()。当我执行更新时，ul li我handleScroller()再次调用该函数，以便 slimScrollDiv 被销毁并再次重建。我还设置了 ul 容器的高度。它似乎工作得很好。这是我的代码示例：

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

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

HTML/Bootsrap menu

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

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 herethat wraps the handleScroller()logic around a setInterval(). I suggest staying away setInterval()if possible.

注意：有一个解决方案在这里包装了handleScroller()周围的逻辑setInterval()。setInterval()如果可能的话，我建议远离。

回答by Jinka Jagadeesh

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

启用和禁用 slimscroll $('#scrollable').slimscroll("destroy");