Jasny Bootstrap的离屏菜单在手机上无法滚动

Question

我使用"Jasny Bootstrap"插件创建了一个侧边栏菜单。它的标记相当简单：

<div class="navmenu navmenu-inverse navmenu-fixed-right offcanvas-sm sidemenu">

    <ul class="nav navmenu-nav>
        <li></li>
        <!-- many more <li> which may have <ul> nested -->
    </ul>

</div>

事情是手机上无法滚动。当我尝试滚动它时，它根本不起作用。

我试图使用iOS模拟器和web检查器深入检查它，并尝试绑定一些事件。我尝试将“scroll”事件绑定到“.sidemenu”，但这个事件从未被触发。然后，我尝试绑定“touchstart”事件，它按预期工作。我想这意味着它确实识别了我的触摸，但它只是不能识别滚动手势？

你知道为什么它不起作用吗？

- kfirba

---

我运行了一些测试，它在移动端上能正常工作，并且可以滚动。 - Farzad Yousefzadeh

@FarzadYZ 真的吗？这很奇怪... 我使用不同的手机和模拟器进行了许多测试，但无法使其工作。如果我分享我实际生产代码的演示链接，你介意试一试吗？ - kfirba

我可以提供一个演示。 - Farzad Yousefzadeh

@FarzafYZ 请访问 http://receipto.org/#!/auth/login 并使用 [e-mail] 作为电子邮件和 password 作为密码。对于奇怪的语言我表示歉意。当您登录时，您将在右侧看到我所说的内容。请注意，使用实际手机查看该问题。当浏览器调整大小或使用Chrome模拟器时，它可以正常工作，但在真实手机上无法正常工作。谢谢！ - kfirba

我在手机上看到了这个问题，它在Gecko和Webkit上都存在。一个解决方法是使用.navmenu-nav { overflow-y: auto }。请检查是否解决了问题。 - Farzad Yousefzadeh

Answer 1

我编辑了jasny-bootstrap.js文件，第106行，并将其更改为：

OffCanvas.DEFAULTS = {
toggle: true,
placement: 'auto',
autohide: true,
recalc: true,
disableScrolling: false, /*true*/ 
modal: false

}

这对我有用。

- mene3

Answer 2

尝试在切换按钮中添加 data-placement="right"，这样做对我来说解决了问题。

<type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#menucanvas" data-placement="right">

- Ralf