是否可以使用flexbox显示模型设置元素的滚动位置

Question

我正在使用Angular Material来构建一个web应用程序，它使用Flexbox显示模型。<身体>处于（0,0），因为应用程序是"整页"，但我想在工具栏中添加一个按钮，滚动到主要内容的顶部<div>。不确定这是可能的，因为我不认为Flexbox API向JavaScript展示了这样做的能力

尝试的解决方案：

window.scrollTo(0,0);
document.getElementById('elementId').scrollIntoView();

Answer 1

我的HTML看起来如下：

<div id="main" layout="column" flex>
    <md-toolbar></md-toolbar>
    <md-content></md-toolbar>
</div>

我尝试以<div>为目标，并使用JavaScript滚动到顶部，如下所示：

document.getElementById('main').scrollTop = 0;

但这不会起作用，因为<div id="main">的scrollTop值等于0，因为它是一个完整的网页应用程序。

我将id属性移动到<md-content>元素：

<div layout="column" flex>
    <md-toolbar></md-toolbar>
    <md-content id="main"></md-toolbar>
</div>

在我的控制器中，我注入了"$window"服务，以在"document"对象上获得一个钩子，从而更恰当地在元素上获得钩子：

angular
    .module('app')
    .controller('Controller', Controller);
Controller.$inject = ['$window', ...];
function Controller($window, ...) {
    var vm = this;
    vm.scrollToTop = scrollToTop;
    ...
    function scrollToTop(elementId) {
        $window.document.getElementById(elementId).scrollTop = 0;
    }
    ...
}