如何使画布外菜单滚动？

Question

I've been trying to get my off-canvas menu working by scrolling particularly in landscape mode because the list itself runs longer than the size of the screen. 我一直在尝试通过特别是在横向模式下滚动来使画布菜单正常工作，因为列表本身的运行时间超过了屏幕的大小。 This menu is shown below 768px for tablet and mobile. 对于平板电脑和移动设备，此菜单显示在768像素以下。

To clarify, the menu items go longer then the screen space and I'm trying to get it to scroll by doing multiple methods, such as overflow-y: scroll, -webkit-overflow-scrolling: touch and more (all works in desktop browser at phone sizes when I was messing in the inspector). 为了澄清起见，菜单项比屏幕空间更长，我正在尝试通过多种方法使其滚动，例如： overflow-y：scroll，-webkit-overflow-scrolling：touch和更多（所有功能均在台式机上运行）当我在检查器中弄乱时，浏览器使用手机尺寸）。

I've been trying everything to inspect the elements and get the menu to scroll when needed and not the background (website/page behind menu). 我一直在尝试一切检查元素，并在需要时滚动菜单，而不是背景（网站/菜单后面的页面）滚动菜单。 Here is some of my markup and styling, I'm also including a live link to inspect as its way easier than pasting everything in here. 这是我的一些标记和样式，我还包括一个实时链接，以进行检查，而不是将所有内容粘贴在此处。 Any help is kindly appreciated! 任何帮助，感激不尽！

LIVE LINK 实时链接

<body class="cbp-spmenu-push">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left mobile" id="cbp-spmenu-s1">
    <a class="m-storyLink mobile-nav-link" href="">1</a>
    <a href="/news" class="m-newsLink mobile-nav-link">2</a>
    <a href="/justmayo" class="m-mayoLink mobile-nav-link">3</a>
    <a href="#" class="mobile m-contactHead show-for-small-only mobile-nav-link">3</a>
    <a href="" class="show-for-medium-only m-contactHead mobile-nav-link fancybox fancybox.iframe" data-fancybox-type="iframe" href="contact-form.php">Contact Us</a>
    <a href="#" class="mobile mobile-nav-link m-phone-num">4</a>
      <ul class="mobile-social">
          <li><a href="//www.facebook.com/" target="_blank" class="mobile-fb"></a></li>
          <li><a href="//twitter.com/" target="_blank" class="mobile-twit"></a></li>
          <li><a href="" class="mobile-goog"></a></li>
      </ul>
</nav>

<header id="header" class="header headroom headroom--pinned">
  <!-- mobile header --> 
  <div class="mobile">
    <button id="showLeftPush">MENU</button>
    <a href="#top" class="mobile-logo mobile"><img src="img/home/logo.png" alt="#"</a>
  </div>

And CSS 和CSS

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

.cbp-spmenu-push-toright.cbp-spmenu-push {
overflow: hidden;
position: fixed;
}
/* General styles push menu*/
.cbp-spmenu {
    background-color: #000;
    position: fixed;
   font-family: FranklinGothicLTCom-BkCm, "Arial Narrow", sans-serif;
   padding: 110px 0 0 0;
 }

  .mobile-nav-link {
    background-position: 10px center;
  }


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

  .cbp-spmenu-vertical {
    width: 240px;
    min-height: 300px;
    height: 100%;
    top: 0;
    z-index: 1000;
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -ms-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
  }


  .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;
  }

  /* Horizontal menu that slides from the top or bottom */

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

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

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

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

  /* Push classes applied to the body */

  .cbp-spmenu-push {
    position: relative;
    left: 0;
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -ms-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
  }

LIVE LINK: http://bit.ly/1eGCShX 实时链接： http ： //bit.ly/1eGCShX

Answer 1

cbp-spmenu has a min-height of 550px . cbp-spmenu的min-height of 550px 。 This is what is limiting your ability to scroll it in smaller resolutions. 这就是限制您以较小分辨率滚动它的能力。

Remove the min-height and you should be fine. 删除最小高度，您应该可以。 Of course, do it as a media query, so it only is in effect on mobile devices. 当然，可以将它作为媒体查询来执行，因此它仅在移动设备上有效。

-----------update---------------- -----------更新----------------

not sure if you just changed it, but I took another look and now I don't see the min-height , but adding overflow:auto to the same cbp-spmenu element also makes it scroll. 不知道您是否刚刚更改它，但是我又看了一下，现在看不到min-height ，但是将overflow:auto添加到相同的cbp-spmenu元素也会使其滚动。

如何使画布外菜单滚动？

问题描述

1 个解决方案

解决方案1
4 已采纳 2014-03-08 06:52:31

如何使画布外菜单滚动？

问题描述

1 个解决方案

解决方案1 4 已采纳 2014-03-08 06:52:31

解决方案1
4 已采纳 2014-03-08 06:52:31