溢出：在 ui-router ui-view 上滚动

Question

我已经创建了 index.html，我希望导航栏位于屏幕底部。当加载的页面有很多内容时，我希望能够滚动到加载内容的位置，但页面底部的导航栏始终保持在那里。

我的index.html

<div class="row wrapper">
    <div class="col-md-12 scrollable">
        <div ui-view></div>
    </div>
    <div class="push"></div>
</div>

<div class="row footer" id="footer">
    <div class="col-md-12">
        <ul class="nav nav-tabs" id="myTabs">
            <li><a ui-sref="home">Home</a></li>
            <li><a ui-sref="about">About</a></li>
            <li><a ui-sref="portfolio">Portfolio</a></li>
            <li><a ui-sref="test">test</a></li>
        </ul>
    </div>
</div>

和我的 css 可滚动 class

.scrollable {
    width: 100%
    overflow: scroll;
}

Answer 1

如果您使用 bootstrap，而不是放置页脚，因为技术上它只是页面底部的导航，您可以像这样使用粘性导航结构：

.scrollable {
    width: 100%
    overflow-y: scroll;
}

.....

<div class="row wrapper">
    <div class="col-md-12 scrollable">
        <div ui-view></div>
    </div>
    <div class="push"></div>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom">
    <div class="col-md-12">
        <ul class="nav nav-tabs" id="myTabs">
            <li><a ui-sref="home">Home</a>
            </li>
            <li><a ui-sref="about">About</a>
            </li>
            <li><a ui-sref="portfolio">Portfolio</a>
            </li>
            <li><a ui-sref="test">test</a>
            </li>
        </ul>
    </div>
</nav>

溢出：在 ui-router ui-view 上滚动

overflow: scroll on ui-router ui-view

css

scroll

angular-ui-router