Question

我尝试使用ionic.css为应用程序设置样式。我读了一些这是可能的帖子。 E.g. in this thread someone claims to use it with ko and durandal。所以我添加了css并创建了一些测试内容：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <title>ChocolateChip-UI iOS</title>
        <link href="ionic.min.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div class="bar bar-header bar-light">
            <h1 class="title">Music</h1>
        </div>
        <div class="content has-header">
            <div class='list'>
                <a class='item item-avatar'>
                    <img src="../images/Hurry and Harm.jpg" alt=""/>
                    <h2 >title</h2>
                    <p >text</p>
                </a>
                <a class='item item-avatar'>
                    <img src="../images/Hurry and Harm.jpg" alt=""/>
                    <h2 >title</h2>
                    <p >text</p>
                </a>
                <a class='item item-avatar'>
                    <img src="../images/Hurry and Harm.jpg" alt=""/>
                    <h2 >title</h2>
                    <p >text</p>
                </a>
                <a class='item item-avatar'>
                    <img src="../images/Hurry and Harm.jpg" alt=""/>
                    <h2 >title</h2>
                    <p >text</p>
                </a>
                <a class='item item-avatar'>
                    <img src="../images/Hurry and Harm.jpg" alt=""/>
                    <h2 >title</h2>
                    <p >text</p>
                </a>
                <a class='item item-avatar'>
                    <img src="../images/Hurry and Harm.jpg" alt=""/>
                    <h2 >title</h2>
                    <p >text</p>
                </a>
                <a class='item item-avatar'>
                    <img src="../images/Hurry and Harm.jpg" alt=""/>
                    <h2 >title</h2>
                    <p >text</p>
                </a>
                <a class='item item-avatar'>
                    <img src="../images/Hurry and Harm.jpg" alt=""/>
                    <h2 >title</h2>
                    <p >text</p>
                </a>
            </div>
        </div>
    </body>
</html>

该应用看起来像预期的那样，但内容不会滚动。如何启用滚动？

Answer 1

让我们从这个离子的例子开始：http://codepen.io/mvidailhet/pen/bVyNmz?editors=101

如果我们将overflow-scroll="true"添加到ion-content元素（禁用javascript滚动并使用默认滚动），我们可以在DOM中看到Ionic向{{1}添加了一个类overflow-scroll并添加了一个带有ion-content类的内部div。您只需使用Ionic CSS滚动列表即可。

这是一个有效的Codepen：http://codepen.io/mvidailhet/pen/LpoEeW

用离子css滚动（不含ionic.js）

1 个答案: