Question

我有一个简单的html代码，我有一个左侧菜单。我想在同一页面内点击菜单滚动内容。另外我不想滚动菜单。问题是，我使用AngularJS，因此编译器在路由和段逻辑之间混淆。这是我的菜单：

<div class="container">
    <div style="float: left;width:150px;">
        <ul class="list-group">
            <li class="list-group-item"><a href="#clinical">overview</a></li>
            <li class="list-group-item">Clinical features</li>
            <li class="list-group-item">Diagnosis</li>
            <li class="list-group-item">Testing laboratories</li>
            <li class="list-group-item">Result interpretation</li>
        </ul>
    </div>

    <div class="col-md-10" id="clinical">
        <div class="row">
            <div class="col-md-2">Result interpretation</div>
            <div class="col-md-10">
                <p style="text-align: right;">Back To Top</p>
            </div>
        </div>
        <hr>
        <p>Hey this is just to test.</p>
    </div>
</div>

Answer 1

这不是AngularJS或其他任何特定问题。这只是一个很小的CSS问题：

您使用float: left对齐菜单，这会使其显示在左边框上，但在滚动时不会让您失望（正如您已经注意到的那样）。

解决方案非常简单，只需以不同方式附加菜单即可。有很多不同的方法可以做到这一点，这取决于你是否使用任何JavaScript库（如Bootstrap），但最简单的方法是使用CSS固定菜单：

.menubar {
    /* A fixed alignment will ignore scroll bar positions */
    position: fixed;

    /* Stretch the bar by forcing offsets and a width */
    top: 0;
    left: 0;
    bottom: 0;
    width: 150px;
}

最后但并非最不重要的是，您必须移动您的内容，以便它不被菜单栏隐藏（否则会重叠）：

.content {
    padding-left: 150px; /* of course this could use positioning as well */
}

You can try the whole thing in this jsFiddle.

根据您的问题，您是否也在寻找软滚动功能尚不清楚，但为此您最有可能想要一些额外的JavaScript库 - 或者您可以使用一些提供的库一切都适合你（包括菜单栏CSS等），如Bootstrap或UI Kit。

无法使用HTML中的AngularJS在页面内滚动

1 个答案: