blocks|key|545294|text|我做了这个函数，它在我的例子中工作得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|545295|function+destroySlimscroll(objectId)+{+
+++$("#"%2BobjectId).parent().replaceWith($("#"%2BobjectId));+
}|code-block|syntax|javascript|545296|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I made this function which works great in my case 

<pre><code>function destroySlimscroll(objectId) { 
 $("#"+objectId).parent().replaceWith($("#"+objectId)); 
}
</code></pre>

blocks|key|1525072|text|$("#scrollable").slimScroll({destroy:+true});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1525073|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$("#scrollable").slimScroll({destroy: true});
</code></pre>

blocks|key|545370|text|我这样做了，它比我见过的任何其他解决方案都要好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|545371|$(".slimScrollBar,.slimScrollRail").remove();
$(".slimScrollDiv").contents().unwrap();|code-block|syntax|javascript|545372|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>$(".slimScrollBar,.slimScrollRail").remove();
$(".slimScrollDiv").contents().unwrap();
</code></pre>

blocks|key|4583209|text|尝试在它上调用destroy方法，希望它支持。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4583210|$('#scrollable').slimscroll("destroy");|code-block|syntax|javascript|4583211|您还可以删除插件应用的所有内联样式|4583212|$('#scrollable').attr('style',+'');|4583213|entityMap^0|7|7|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

Try calling <code>destroy</code> method on it, hopefully it supports.

<pre><code>$('#scrollable').slimscroll("destroy");
</code></pre>

You can also remove all inline styles applied by the plugin 

<pre><code>$('#scrollable').attr('style', '');
</code></pre>

blocks|key|4583264|text|我在一个大型的SPA应用程序中遇到了这样的问题。即使调用了slimScroll的destroy方法，scroll也一直堆积在一起。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4583265|所以这是我的解决方案。|4583266|$('.slimScrollBar,.slimScrollRail').remove();
$('.slimScrollDiv').each(function(){
++++$(this).replaceWith($(this).children());
})|code-block|syntax|javascript|4583267|这段代码运行并销毁所有滚动，然后控制器可以根据需要自由绑定滚动。|4583268|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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.

<pre><code>$('.slimScrollBar,.slimScrollRail').remove();
$('.slimScrollDiv').each(function(){
 $(this).replaceWith($(this).children());
})
</code></pre>

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

blocks|key|545418|text|没有一个答案对我有效，所以我想我应该分享我的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|545419|我在document.ready()上加载了一个名为handleScroller()的函数。当我在ul+li上执行更新时，我再次调用handleScroller()函数，以便销毁并重新构建slimScrollDiv。我还设置了ul容器的高度。它似乎运行得很好。下面是我的代码示例：|offset|length|style|CODE|545420|style.css+.scroller中的高度CSS{：182px;}|BOLD|545421|HTML/Bootsrap菜单|545422|<ul+class="nav+navbar-nav+pull-right">
+++
+++<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">
++++++++<span+class="badge">
++++++++++++6
++++++++
+++</a>
+++<ul+id="notifications"+class="dropdown-menu+extended"></ul>
+++</li>

</ul>|code-block|syntax|javascript|545423|JS/jQuery|545424|$(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+%2B+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
+++});
}|545425|注意：有一个解决方案here，它将handleScroller()逻辑包装在setInterval()周围。如果可能的话，我建议你远离setInterval()。|545426|entityMap|0|LINK|mutability|MUTABLE|url|http://bitishunter.vn/assets/plugins/node_modules/jquery-slimscroll/examples/dynamic-content.html^0|0|2|G|Q|G|1D|5|1U|G|0|R|8|0|0|F|0|0|0|9|0|0|0|29|H|G|12|D|1V|D|A|4|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@$D|17|E|18|F|G]|$D|19|E|1A|F|G]|$D|1B|E|1C|F|G]|$D|1D|E|1E|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1F|8|@$D|1G|E|1H|F|J]]|9|@]|A|$]]|$1|K|3|L|5|6|7|1I|8|@$D|1J|E|1K|F|J]]|9|@]|A|$]]|$1|M|3|N|5|O|7|1L|8|@]|9|@]|A|$P|Q]]|$1|R|3|S|5|6|7|1M|8|@$D|1N|E|1O|F|J]]|9|@]|A|$]]|$1|T|3|U|5|O|7|1P|8|@]|9|@]|A|$P|Q]]|$1|V|3|W|5|6|7|1Q|8|@$D|1R|E|1S|F|J]|$D|1T|E|1U|F|G]|$D|1V|E|1W|F|G]|$D|1X|E|1Y|F|G]]|9|@$D|1Z|E|20|1|21]]|A|$]]|$1|X|3|-4|5|6|7|22|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|14]]]]

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

I load a function called <code>handleScroller()</code> on <code>document.ready()</code>. When I perform an update on the <code>ul li</code> I call the <code>handleScroller()</code> 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

<pre><code>&lt;ul class="nav navbar-nav pull-right"&gt;
 &lt;!-- slimScroll notifications --&gt;
 &lt;li id="header_notification_bar" class="hidden dropdown"&gt;
 &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"&gt;
 &lt;i class="fa fa-bell"&gt;&lt;/i&gt;
 &lt;span class="badge"&gt;
 6
 &lt;/span&gt;
 &lt;/a&gt;
 &lt;ul id="notifications" class="dropdown-menu extended"&gt;&lt;/ul&gt;
 &lt;/li&gt;
&lt;!--other menu items ... //--&gt;
&lt;/ul&gt;
</code></pre>

JS/jQuery

<pre><code>$(document).ready(function(){
 handleScroller();
 VisitedHandler(); 
});

function VisitedHandler(){
 $("#notifs li").on("click",function(){

 $("#notifications").html(''); 
 $('ul#notifs').html('');
 $("#notifications").append('&lt;li&gt;&lt;ul id="notifs" class="dropdown-menu-list scroller"&gt;&lt;/li&gt;');
 var ul = $('#notifs');
 ul.append('&lt;li id="general"&gt;New Announcement&lt;/li&gt;') 
 ul.append('&lt;li id="enhancements"&gt;New Page Enhancements&lt;/li&gt;'); 

 handleScroller();

});
}

function handleScroller(){
 $("#notifs").slimscroll({destroy:true});
 var notes = $("#notifs");
 var height = notes.css("height");
 if($('#notifs .nws').size() &lt; 5 &amp;&amp; $('#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
 });
}
</code></pre>

NOTE: There is a solution <a href="http://bitishunter.vn/assets/plugins/node_modules/jquery-slimscroll/examples/dynamic-content.html" rel="nofollow">here</a> that wraps the <code>handleScroller()</code> logic around a <code>setInterval()</code>. I suggest staying away <code>setInterval()</code> if possible.

blocks|key|504503|text|启用slimscroll并禁用slimscroll+$(‘#scrollable’)销毁(“.slimscroll”)；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|504504|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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

I got a div, and to make it fancier I use the <a href="https://github.com/rochal/jQuery-slimScroll" rel="nofollow noreferrer">SlimScroll jQuery plugin</a> on that div

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

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 <code>slimscroll</code>?

Removing slimscroll from div

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个div，为了让它更有趣，我在那个div上使用了$('#scrollable').slimscroll({   color: '#900',   size: '8px',   width: '300px',   height: '500px'});现在，我希望这个div不再有这个属性(而是浏览器默认的滚动条)。如何删除slimscroll

问从div中删除slimscroll
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从div中删除slimscrollEN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从div中删除slimscroll
EN