Search code examples
jquerycssjquery-ui-accordionnicescroll

Issue with nicescroll used inside an accordion


I have a jquery accordion in my website and placed a nicescroll on a div inside the first part of the accordion.

When I move on to the next part of the accordion and new contents are shown, the nicescrollbar from the previous part is still visible.

How can I remove it while moving to other parts of the accordion?

<script type="text/javascript">
jQuery(document).ready(function () {
    $("#wizard").accordion({
        heightStyle: "content"
    });
    $('#wizard').accordion();
    $('#wizard button').click(function (e) {
        e.preventDefault();
        var delta = ($(this).is('.next') ? 1 : -1);
        $('#wizard').accordion('option', 'active', (
        $('#wizard').accordion('option', 'active') + delta));
    });
    $("#boxscroll").niceScroll({
        touchbehavior: false,
        cursorcolor: "#34759a",
        cursoropacitymax: 0.7,
        cursorwidth: 7,
        cursorborder: "1px solid #2848BE",
        cursorborderradius: "8px",
        background: "#ccc",
        autohidemode: false
    });
});
</script> 

Solution

  • I simply put all the contents in a div and added its id (scrollContent) to the script.

    $("#boxscroll").niceScroll({
        "#scrollContent", 
        touchbehavior: false,
        cursorcolor: "#34759a",
        cursoropacitymax: 0.7,
        cursorwidth: 7,
        cursorborder: "1px solid #2848BE",
        cursorborderradius: "8px",
        background: "#ccc",
        autohidemode: false
    });