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

Question

我正在使用使用 Flexbox 显示模型的 Angular Material 来构建 Web 应用程序。

的滚动位置在 (0,0)，因为应用程序是“整页”，但我想在工具栏中添加一个按钮以滚动到主要内容

的顶部。不确定这是否可能，因为我认为 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，因为它是一个整页 web 应用程序。

我将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;
    }

    ...
}