Question

我正在使用Angular Material，它使用Flexbox显示模型来构建Web应用程序。＆lt; body＆gt;的滚动位置。位于（0,0），因为应用程序是“整页”，但我想在工具栏中添加一个按钮以滚动到主要内容的顶部＆lt; div＆gt;。不确定是否可行，因为我不认为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的{{1}}值等于0，因此它不会起作用，因为它是一个整页的网络应用程序。

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

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

在我的控制器中，我注入了＆＃34; $ window＆＃34;服务以获取＆＃34;文件＆＃34;反对更恰当地获取元素的钩子：

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

    ...
}

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

1 个答案: