web-dev-qa-db-ja.com

jQuery scrollTop（）はすべての要素に対して0を返します

私の仕事では、AngularJSで作成した1ページのサイトがあります。
ui-routerプラグイン（バージョン0.2.0）を使用しています。
最近、ある状態から別の状態に移動するときに、ウィンドウが上にスクロールされないことに気づきました。
状態が変化するたびにjQueryのscrollTop()関数を使用して（_$stateChangeSuccess_イベントを使用して）手動で一番上までスクロールしようとしました。しかし、それはうまくいきませんでした。

そこで調査を開始しましたが、scrollTop()がページ上のすべての要素に対して0を返していることに気付きました。
それだけでなく、_window.scrollY_をコンソールに出力すると0になります（ページのどこにいても）。私のコードだけでなく、chrome開発ツールコンソールで記述しただけでも。

AngularJSとui-routerを使用していくつかのアプリを作成しましたが、これはこの特定のアプリでのみ発生します。

scrollTop()関数または_window.scrollY_フィールドを上書きしたかどうかを確認しましたが、何も見つかりませんでした。

_ui-view_を_autoscroll="true"_および_autoscroll="false"_と一緒に使用してみましたが、違いはありませんでした。

また、html要素とbody要素に_height:100%_を与えてみましたが、与えずに試しました。しかし、何もありません。

私は本当に次に何をすべきかわかりません。

問題を再現することはできませんでしたが、ここに投稿する必要のある、役立つコードがあると思われる場合は、喜んで対応させていただきます。

ありがとう！

編集：

私はコンソールでこの関数を実行しました：

_var l = $('*').length;
for(var i = 0; i < l; i++) {
    var elem = $('*:eq(' + i + ')');
    if(elem.scrollTop() > 0) {
        console.log(elem, elem.scrollTop());
    }
}
_

この関数は、トップスクロールで1つの要素のみを出力しました。
要素は、コンテンツ全体とメインビューを保持するラッピングdivです（アプリにネストされたビューがあります）。
この要素でscrollTop(0)を使用すると、必要なものが得られますが、それは症状のみを扱い、実際の問題は扱いません。

javascriptjqueryangularjsscrollangular-ui-router
12
jonny bordo

@Hansがコメントしたように、実際には問題はありませんでした。 absoluteに配置されたラッピング要素がありました。

top:0;
bottom:0;
left:0;
right:0;
overflow:auto

したがって、ウィンドウのscrollTopは常に0であり、スクロールバーは実際にはラッピング要素に属していました。

ラッピング要素の位置を取り除くことができなかったので、ui-routerの$stateChangeSuccessイベントを使用し、ラッピング要素を手動で一番上にスクロールしました。

4
jonny bordo

コンソールから、試してみてください

console.log(frames)
console.log(frames.top.scrollY)

Window.scrollYが0を示している場合、参照フレームはウィンドウであってはなりません。ページにiframeはありますか？フレームのconsole.logは、ページ上のフレームのリストを表示します。
お役に立てば幸いです。

2
Chi Row

私のコードもこの問題で発生し、body {overflow：hidden;}が理由であることがわかりました。「overflow：hidden;」を削除します。そして、すべてが順調です。

1
uames