使用 ionic css 滚动（没有 ionic.js）

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

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

如果我们将 overflow-scroll="true" 添加到 ion-content 元素（禁用 javascript 滚动并使用默认滚动），我们可以在 DOM 中看到 Ionic 添加了一个 class overflow-scroll 到 ion-content 并添加了一个内部 div 和 scroll class。这就是使用 Ionic CSS.

使列表可滚动所需的全部内容

这是一个可用的代码笔：http://codepen.io/mvidailhet/pen/LpoEeW

使用 ionic css 滚动（没有 ionic.js）

Scrolling with ionic css (without ionic.js)

css

scroll

ionic