jasny bootstrap offcanvas 无法在手机上滚动答案

【问题标题】：jasny bootstrap offcanvas doesn't scroll on phonesjasny bootstrap offcanvas 无法在手机上滚动
【发布时间】：2016-02-20 15:45:21
【问题描述】：

我使用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>

问题是它不能在手机上滚动。当我尝试滚动它时它不起作用。

我试图使用带有 Web 检查器的 iOS 模拟器深入检查它并尝试绑定一些事件。我尝试将scroll 事件绑定到.sidemenu，但该事件从未触发。然后我尝试绑定touchstart 事件，它按预期工作。我想这意味着它确实可以识别我的触摸，但它只是无法识别滚动手势？

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

【问题讨论】：

我进行了一些测试，它可以在移动设备上运行，也可以滚动。
@FarzadYZ 真的吗？这很奇怪..我使用不同的手机甚至模拟器进行了许多测试，但我无法让它工作。如果我分享了我的实际生产代码的演示链接，你介意尝试一下吗？
是的，我可以。提供演示
@FarzafYZ 请访问receipto.org/#!/auth/login 并使用demo@receipto.org 作为电子邮件地址和password 作为密码。我为奇怪的语言道歉。当你登录时，你会在你的右边看到我在说什么。请注意，请使用实际手机查看该问题。当浏览器调整大小或使用 chrome 的模拟器但在真实手机上不起作用时，它可以工作。谢谢！
我在移动设备上看到了这个问题，它在 Gecko 和 Webkit 上都有。一种解决方法是使用.navmenu-nav { overflow-y: auto }。检查是否可以解决问题。

标签： javascript jquery css twitter-bootstrap jasny-bootstrap

【解决方案1】：

我编辑了 jasny-bootstrap.js，第 106 行并进行了更改：

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

}

它对我有用。

【讨论】：

【解决方案2】：

尝试将 data-placement="right" 添加到切换按钮，这样做解决了我的问题。

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

【讨论】：