div

Question

से निकाला जा रहा है slimscroll मैं एक div मिल गया है, और यह अधिक सजावटी मुझे लगता है कि div पर SlimScroll jQuery plugin का उपयोग

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

अब एक पल है जब मैं यह अब और इस संपत्ति के लिए नहीं div चाहते हैं (लेकिन करने के लिए बनाने के लिए ब्राउज़र डिफ़ॉल्ट स्क्रॉलबार)। मैं slimscroll कैसे हटा सकता हूं?

Answer 1

मैं इस समारोह जो मेरे मामले में अच्छा काम करता है बनाया द्वारा लागू सभी इनलाइन शैलियों को हटा सकते हैं

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

Answer 2

destroy विधि पर कॉल करने का प्रयास करें, उम्मीद है कि यह समर्थन करता है।

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

तुम भी प्लगइन

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

Answer 3

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

Answer 4

मैं मुसीबत कर रहा था यह एक बड़े एसपीए ऐप में है। स्क्रॉल बस एक दूसरे के शीर्ष पर पिलिंग रखा गया है, यहां तक ​​कि slimScroll की नष्ट विधि को बुलाकर भी।

तो मेरा समाधान यहां है।

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

यह कोड सभी स्क्रॉल चलाता है और नष्ट करता है, तो नियंत्रक आवश्यकतानुसार स्क्रॉल को बाध्य करने के लिए स्वतंत्र होते हैं।

Answer 5

मैं इस किया था और यह किसी भी अन्य समाधान मैंने देखा की तुलना में बेहतर काम करता है ..

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

Answer 6

जवाब में से कोई भी मेरे लिए काम किया इसलिए मैंने सोचा कि मैं अपने समाधान का हिस्सा होगा।

मैं पर document.ready() पर एक फ़ंक्शन लोड करता हूं। जब मैं ul li पर एक अद्यतन करता हूं तो मैं slimScrollDiv को नष्ट करने और फिर से पुनर्निर्मित करने के लिए handleScroller() फ़ंक्शन को फिर से कॉल करता हूं। मैंने उल कंटेनर की ऊंचाई भी निर्धारित की है। ऐसा लगता है कि यह काफी अच्छा काम कर रहा है।

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> 

जे एस jQuery /;:

style.css .scroller {182px ऊंचाई} में सीएसएस: यहाँ मेरी कोड का एक नमूना है

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

नोट: एक समाधान here है जो setInterval() के आसपास handleScroller() तर्क को लपेटता है। यदि संभव हो तो मैं setInterval() दूर रहने का सुझाव देता हूं।

Answer 7

slimscroll को सक्षम करने और slimscroll $ ('# scrollable') अक्षम करने के लिए। Slimscroll ("नष्ट करें");