Question

我有以下代码，我在Visual Studio中运行以将Cordova应用程序部署到WP设备。我为某些元素添加了背景颜色，以查看可滚动内容的呈现方式。当我滚动到底部或顶部时，无序列表将从其父级弹回，并且蓝色背景将可见。如何渲染列表，以便在到达列表的底部或顶部时只看到黄色背景？

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>BlankCordovaApp7</title>

    <!-- BlankCordovaApp7 references -->
    <link href="css/index.css" rel="stylesheet" />
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li id="lastChild">20</li>
    </ul>

    <!-- Cordova reference, this is added to your app when it's built. -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>

    <script src="scripts/index.js"></script>
</body>
</html>

CSS

html, body, * {
    margin: 0;
    padding: 0;
}

html {
    background-color: red;
    height: 100%;
    -ms-touch-action: pan-y;
}

body {
    background-color: blue;
    height: 100%;
}

ul {
    background-color: yellow;
    padding: 10px;
}

li {
    list-style-type: none;
    margin-bottom: 10px;
    background-color: gray;
    height: 200px;
    text-align: center;
    font-size: 20px;
    color: white;
    font-weight: bold;
}

#lastChild {
    margin-bottom: 0px;
}

我尝试将此添加到config.xml而不是设置-ms-touch-action，但它没有工作：

<preference name="disallowoverscroll" value="true"/>

Answer 1

我刚刚在config.xml中尝试了这两行：

<preference name="fullscreen" value="true"/>
<preference name="disallowoverscroll" value="true"/>

它似乎工作:) ...

（当然 - 我的应用程序变成了全屏...但实际上这对我来说更好:) :)

在WP8 Cordova应用程序中禁用内容退回 - disallowoverscroll不起作用

1 个答案: