javascript - 移动滑动菜单可滚动

Question

我将 classie.js 用于我网站的手机滑动菜单。效果很好!但只有一个问题:

我的菜单非常适合移动设备一次显示所有菜单项。如何使这个垂直菜单可滚动？当我在菜单打开时滚动时，只有页面滚动。但我希望菜单向下滚动...

希望有人能帮帮我..

HTML:

<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
            <h3> <img id="showLeftPush2" src="../images/banner_logo3.png" alt="logo StillD"></h3>
            <a href="../">Home</a>

            <a href="../portfolio/">Portfolio</a>
            <a href="../testimonials/">Testimonials</a>
            <a href="../blog/">Blog</a>
            <a href="../contact/">Contact</a>
        </nav>
        <div class="container">


                <section class="buttonset">

                    <div id="mobile-header">
                        <a id="showLeftPush"><div id="responsive-menu-button2">menu</div></a>
                    </div>

                </section>
            </div>
        </div>
        <script src="../js/classie.js"></script>
        <script>
            var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
                menuRight = document.getElementById( 'cbp-spmenu-s2' ),
                menuTop = document.getElementById( 'cbp-spmenu-s3' ),
                menuBottom = document.getElementById( 'cbp-spmenu-s4' ),

                showLeftPush = document.getElementById( 'showLeftPush' ),

                body = document.body;

            showLeftPush.onclick = function() {
                classie.toggle( this, 'active' );
                classie.toggle( body, 'cbp-spmenu-push-toright' );
                classie.toggle( menuLeft, 'cbp-spmenu-open' );
                disableOther( 'showLeftPush' );
            };

            function disableOther( button ) {

                if( button !== 'showLeftPush' ) {
                    classie.toggle( showLeftPush, 'disabled' );
                }

            }
        </script>

CSS:

/* General styles for all menus */
.cbp-spmenu {
    background: #383b45;
    position: fixed;

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}

.cbp-spmenu h3 {
    color: #afdefa;
    font-size: 1.9em;
    padding: 20px;
    margin: 0;
    margin-top: 20px;
    font-weight: 300;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90px;

}

.cbp-spmenu a {
    display: block;
    color: #fff;
    letter-spacing: 0.5px;
    line-height: 35px;
    font-weight: 100;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;   
    font-size: 17px;

         -o-transition:.5s;
    -ms-transition:.5s;
   -moz-transition:.5s;
-webkit-transition:.5s;
        transition:.5s;
}

.cbp-spmenu a:hover {
    background: #2d2e32;

         -o-transition:.5s;
    -ms-transition:.5s;
   -moz-transition:.5s;
-webkit-transition:.5s;
        transition:.5s;
}

.cbp-spmenu a:active {
    background: #63666f;

         -o-transition:.5s;
    -ms-transition:.5s;
   -moz-transition:.5s;
-webkit-transition:.5s;
        transition:.5s;
}


/* Orientation-dependent styles for the content of the menu */

.cbp-spmenu-vertical {
    width: 240px;
    height: 100%;
    top: 0;
    z-index: 1000;
}

.cbp-spmenu-vertical a {
    border-bottom: 1px solid #2d2e32;

    padding: 1em;
}

.cbp-spmenu-horizontal {
    width: 100%;
    height: 150px;
    left: 0;
    z-index: 1000;
    overflow: hidden;
}

.cbp-spmenu-horizontal h3 {
    height: 100%;
    width: 20%;
    float: left;
}

.cbp-spmenu-horizontal a {
    float: left;
    width: 20%;
    padding: 0.8em;
    border-left: 1px solid #258ecd;
}

/* Vertical menu that slides from the left or right */

.cbp-spmenu-left {
    left: -240px;
}

.cbp-spmenu-right {
    right: -240px;
}

.cbp-spmenu-left.cbp-spmenu-open {
    left: 0px;
}

.cbp-spmenu-right.cbp-spmenu-open {
    right: 0px;
}


/* Push classes applied to the body */

.cbp-spmenu-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}

.cbp-spmenu-push-toright {
    left: 240px;
}

.cbp-spmenu-push-toleft {
    left: -240px;
}

/* Transitions */

.cbp-spmenu,
.cbp-spmenu-push {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Example media queries */

@media screen and (max-width: 55.1875em){

    .cbp-spmenu-horizontal {
        font-size: 75%;
        height: 110px;
    }

    .cbp-spmenu-top {
        top: -110px;
    }

    .cbp-spmenu-bottom {
        bottom: -110px;
    }

}

@media screen and (max-height: 26.375em){

    .cbp-spmenu-vertical {
        font-size: 90%;
        width: 190px;
    }

    .cbp-spmenu-left,
    .cbp-spmenu-push-toleft {
        left: -190px;
    }

    .cbp-spmenu-right {
        right: -190px;
    }

    .cbp-spmenu-push-toright {
        left: 190px;
    }
}

jQuery:

/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 * 
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

window.classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

})( window );

Answer 1

我自己修好了:

溢出-y:滚动；