如何使畫布外菜單滾動？

Question

我一直在嘗試通過特別是在橫向模式下滾動來使畫布菜單正常工作，因為列表本身的運行時間超過了屏幕的大小。 對於平板電腦和移動設備，此菜單顯示在768像素以下。

為了澄清起見，菜單項比屏幕空間更長，我正在嘗試通過多種方法使其滾動，例如： overflow-y：scroll，-webkit-overflow-scrolling：touch和更多（所有功能均在台式機上運行）當我在檢查器中弄亂時，瀏覽器使用手機尺寸）。

我一直在嘗試一切檢查元素，並在需要時滾動菜單，而不是背景（網站/菜單后面的頁面）滾動菜單。 這是我的一些標記和樣式，我還包括一個實時鏈接，以進行檢查，而不是將所有內容粘貼在此處。 任何幫助，感激不盡！

實時鏈接

<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>

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

實時鏈接： http ： //bit.ly/1eGCShX

Answer 1

cbp-spmenu的min-height of 550px 。 這就是限制您以較小分辨率滾動它的能力。

刪除最小高度，您應該可以。 當然，可以將它作為媒體查詢來執行，因此它僅在移動設備上有效。

-----------更新----------------

不知道您是否剛剛更改它，但是我又看了一下，現在看不到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