0

Flexbox 表示モデルを使用する Angular Material を使用して Web アプリを構築しています。アプリは「フルページ」であるため、<body> のスクロール位置は (0,0) ですが、メイン コンテンツ <div> の上部にスクロールするボタンをツールバーに追加したいと考えています。Flexbox API が JavaScript にその機能を公開しているとは思わないので、それが可能かどうかはわかりません。

試みられた解決策:

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

1 に答える 1

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">しかし、フルページの Web アプリケーションであるため、の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;
    }

    ...
}
于 2015-03-31T17:57:43.833 に答える