AngularJS滚动问题答案

【问题标题】：AngularJS Scrolling IssueAngularJS滚动问题
【发布时间】：2016-03-07 00:53:18
【问题描述】：

我有一个可以加载多个视图的容器

<md-content flex id="content">
     <div ng-view></div>
</md-content>

例如，其中一个加载的视图如下所示

<div layout="column" id="selection-whiteframe" ng-controller="MathCtrl">
    [Header Row Here]
    <md-content id="MathContent">
        [SomeContent]
    </md-content>
</div>

问题是，如果“MathContent”中有太多内容，则 NG-View Div 变为 Scrollable 而不是“MathContent” Md-Content 不需要什么，因为 [Header Row] 应该有一个固定的位置。

是否有可能以某种方式禁止元素（例如 ng-view）可滚动，或者我可以将 selection-whiteframe 的最大大小锁定到 ng-view 的高度？

【问题讨论】：

你可以通过css属性“overflow”来做到这一点
你可以为此做一个 plunker 吗？

标签： html css angularjs angular-material

【解决方案1】：

这有点棘手，要使其在 Chrome 中运行，您只需在每个级别添加 layout="column/row"。

<body layout="column">
    <md-content layout="column" flex id="content">
        <div layout="column" ng-view>
            <div layout="column" id="selection-whiteframe" ng-controller="MathCtrl">
                [Header Row Here]
                <md-content layout="column"  id="MathContent">
                   [SomeContent]
                </md-content>
            </div>
        </div>
    </md-content>

但这在 Firefox 中不起作用。要使其在任何地方都能正常工作，您还需要将所有 div 替换为 md-content。

<body layout="column">
    <md-content layout="column" flex id="content">
        <md-content layout="column" ng-view>
            <md-content layout="column" id="selection-whiteframe" ng-controller="MathCtrl">
                [Header Row Here]
                <md-content layout="column"  id="MathContent">
                   [SomeContent]
                </md-content>
            </md-content>
        </md-content>
    </md-content>

这是一个简单的代码笔，我在这里向您推荐我的答案：https://stackoverflow.com/a/29516060/2553215

http://codepen.io/kuhnroyal/pen/GZoRwz

【讨论】：