适用于 Windows Phone 8 (WP8) 的 MobileAngularUI 可滚动指令答案

【问题标题】：MobileAngularUI scrollable directive for Windows Phone 8 (WP8)适用于 Windows Phone 8 (WP8) 的 MobileAngularUI 可滚动指令
【发布时间】：2015-10-05 02:08:52
【问题描述】：

我正在使用移动 Angular UI 框架来开发我们的新应用。它在 android 和 ios 中运行良好，但在 WP8 中存在一些问题。

我遇到的最糟糕的问题是可滚动类/指令似乎不起作用，所以我似乎无法滚动。

这是子视图中的一些代码

<div class="scrollable">
    <div class="scrollable-content">
        some content here...
    </div>
</div>

我的 index.html 页面是这样的

<body>

<div class="sidebar sidebar-left" toggleable parent-active-class="sidebar-left-in" id="mainSidebar">
        <h1 class="app-name">m2i Anywhere</h1>

    <div class="scrollable">
        <div class="scrollable-content">
            <div class="list-group" toggle="off" bubble target="mainSidebar">
                options here...
            </div>
        </div>
    </div>
</div>

<div class="app">

    <!-- Top Navbar -->
    <div class="navbar navbar-app navbar-absolute-top">

        <div class="navbar-brand navbar-brand-center" yield-to="title">
            <span>m2i Anywhere</span>
        </div>

        <div class="btn-group pull-left" yield-to="navbarLeft"></div>

        <div class="btn-group pull-right" yield-to="navbarRight"></div>
    </div>

    <!-- content -->
    <div class="app-body">
        <div ui-view class="app-content"></div>
    </div>
</div>

</body>

【问题讨论】：

标签： angularjs cordova angularjs-directive angular-ui angular-ui-bootstrap

【解决方案1】：

被这个问题困扰了几天，终于找到了解决方法，如下图：

body, html { 
  -ms-overflow-style: none !important; 
}

以下是原始解决方案提案中的一个示例：https://gist.github.com/tjanczuk/7419485。现场演示在此处托管：http://htmlpreview.github.io/?https://gist.github.com/tjanczuk/7419485/raw/9a13fc9ad43f2103d8b9e23e25c7b0672a13385f/gistfile1.html。您可以使用 Windows Phone 访问此现场演示来检查滚动性能。祝你好运！

【讨论】：

成功了，谢谢！我刚刚在我的 mobile-angular-ui-base.css 开头添加了您发布的选择器，现在可滚动内容按预期工作（在 WP8 上运行的 Lumia 928 测试）

【解决方案2】：

也可以通过添加 .scrollable { position: relative;} 来达到目的

【讨论】：