小编DoP*_*PeT的帖子

如何让我的画布菜单滚动?

我一直在尝试通过滚动来使我的画布菜单工作,特别是在横向模式下,因为列表本身的运行时间比屏幕的大小还长。对于平板电脑和移动设备,此菜单显示在 768 像素以下。

为了澄清,菜单项比屏幕空间更长,我试图通过多种方法让它滚动,例如溢出-y:滚动,-webkit-overflow-scrolling:触摸等等(所有这些都适用于桌面当我在检查器中搞砸时,手机尺寸的浏览器)。

我一直在尝试一切来检查元素并在需要时让菜单滚动而不是背景(菜单后面的网站/页面)。这是我的一些标记和样式,我还包括一个实时链接以进行检查,因为它比将所有内容粘贴到此处更容易。任何帮助表示感谢!

实时链接

<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 …
Run Code Online (Sandbox Code Playgroud)

html javascript css mobile jquery

1
推荐指数
1
解决办法
6121
查看次数

标签 统计

css ×1

html ×1

javascript ×1

jquery ×1

mobile ×1