cubiq / iscroll

Smooth scrolling for the web
http://iscrolljs.com
MIT License
12.87k stars 3.8k forks source link

Iscroll with bootstrap collapse #1175

Open trainsrenton opened 7 years ago

trainsrenton commented 7 years ago

Hi, i've a problem iscroll plugin. I want use iscroll on bootrstrap collapse but my script don't working HTML `

        <nav class="collapse nav_principal" id="menu_collapse">
            <img src="" alt="" title="">
            <div class="close-menu">X</div>
            <div class="wrapperscroller">
                <?php
                wp_nav_menu( array(
                    'theme_location' => 'primary'
                ) );
                ?>
            </div>
        </nav>
    </div>`

CSS : `.wrapper-menu{ position: fixed; top: 10px; z-index: 1;

        .border-btn-menu{
            background: rgba(121,195,158,0.5);
            padding: 5px;
            display: inline-block;

            .btn-menu{
                background: $beige-clair;
                border: none;
                padding: 5px;

                &:focus{
                    outline: none;
                }

                .burger{
                    display: inline-block;
                    margin-right: 5px;
                    float: left;
                    margin-top: 4px;

                    span{
                        width: 20px;
                        height: 2px;
                        background: $marron-fonce;
                        display: block;
                        margin-bottom: 3px;
                    }
                }
            }
        }

        .nav_principal{
            position: fixed;
            top: 0;
            bottom:0;
            left: 0;
            right: 0;
            background: $blanc;
            overflow: hidden;

            ul{
                padding: 0;
                margin-left: 15px;
                margin-right: 15px;
                overflow: scroll;

                li{
                    width: 100%;
                    margin-bottom: 11px;
                    list-style: none;

                    a{
                        color: $vert-clair;
                        font-family: $moon-flower;
                        font-size: 26px
                    }

                    ul{
                        border-bottom: 1px dashed $beige-clair;
                        padding-bottom: 19px;
                        margin-left: 0;
                        margin-right: 0;

                        li{
                            margin-top: 0;
                            a{
                                color: $marron-fonce;
                                font-family: $montserrat;
                                font-size: 14px
                            }

                            &:last-child{
                                margin-bottom: 0;
                            }
                        }
                    }
                }
            }
        }

    }`

And JS `$(document).ready(function() {

//SCROLLBAR

menuScroll = new IScroll('.wrapperscroller', {
    mouseWheel: true,
    scrollbars: true,
    tap: true
});

document.getElementsByClassName('wrapperscroller')[0].addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

$('.btn-menu').on("shown.bs.collapse", function () {
    menuScroll.refresh();
    console.log('test');
});

});`