web-dev-qa-db-ja.com

jQuery scrollTop（）は、モバイルブラウザーのDIVのスクロールでは機能しませんか？

スクロールDIVの特定の場所にスクロールしようとしています。現在、デスクトップブラウザーではうまく機能するjQuery scrollTop（）関数でピクセルオフセットを使用していますが、GoogleのAndroid Chromeブラウザーを除き、Androidモバイルブラウザーでは機能しません。 （動作するかどうかをテストするためのiOSデバイスはありません）。私が見つけた解決策はすべて、ページ（ウィンドウ）スクロール用であり、DIVでのスクロール用ではありません。同じタスクを達成するために他に使用できるものについて、誰か提案がありますか？

例を次に示します：
http://jsfiddle.net/aQpPc/
http://jsfiddle.net/aQpPc/embedded/result/

デスクトップブラウザで動作する他のことを試しました：

document.getElementById('ID_of_element_in_a_DIV').scrollIntoView();
document.getElementById('ID_of_DIV').scrollTop = 200;

EDIT 3/11/13：

これは既知のAndroidブラウザーの問題です。 https://code.google.com/p/Android/issues/detail?id=19625

バグレポートのあるユーザーは回避策を提案しました。

この問題は、overflowプロパティがscrollに設定されている場合にのみ表示されるため、最初に「hidden」に設定し、scrollTopプロパティを設定してから、「scroll」（またはauto）にリセットします。 scrollTopプロパティは、要素がスクロールバーで再レンダリングされるときに尊重されるようです。これに予期しない副作用があるかどうかは明らかではありませんが、「私のマシンで動作します！」

javascriptjqueryhtmlscrollmobile-browser
30
LukeS

これは私のために働いた：

setTimeout( function() {
    $(div).scrollTop(0)
}, 500 );
10
wayofthefuture

私のために働いた回避策：最初に、一時的にオーバーフロープロパティを「非表示」に設定し、次にscrollTopプロパティを設定してから、オーバーフロープロパティを「スクロール」（または自動）に戻します。オーバーフロープロパティが「スクロール」に戻されると、scrollTop値はそのまま保持され、尊重されるようです。これは、私がテストしたすべてのブラウザー（デスクトップおよびモバイル）で機能する非常に簡単な回避策でした。私はそれを徹底的にテストしませんでしたし、適切なトランジションでテストしませんでしたので、私が遭遇していない副作用があるかもしれません...

6
Allan Nienhuis

私はここで答えを見つけました http://blog.jonathanargentiero.com/jquery-scrolltop-not-working-on-mobile-devices-iphone-ipad-Android-phones/

携帯電話は$('html,body')を理解しないため、モバイルでは次のことができます。

_if(navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {           
    window.scrollTo(0)
} else {
    // default `$('html,body')` code for scrolling
}
_

[〜＃〜] or [〜＃〜]

単に$('body')の代わりに$('html, body')を使用してください。

3
Gaurav Aggarwal

Galaxy Tabでページの一番上までスクロールできる唯一の方法は、スクロール中にbodyを100ミリ秒間非表示にすることでした。 jQueryの使用：

$("body").hide();
window.scrollTo(0, 0);
setTimeout(function(){ $("body").show() }, 100);
1
lofihelsinki

これを試しましたか？

$("html").scrollTop(0);
1
Rohi

scroll、scrollTo、またはscrollTopメソッド（モバイルで問題が発生します）を使用するのではなく、トップDOM要素（#topなど）にIDを設定し、以下を使用することをお勧めします。

document.getElementById("top").scrollIntoView();

これは、これまでのところ、すべてのデバイスとブラウザーにわたって最適です。

1
Gray

@Allan Nienhuisの回答で推奨されているように、一時的にoverflowプロパティを 'hidden'に設定しても、Android 4.0.3、たとえば（たとえば、Kindle Fire 2sが実行しているもの）-overflowをscrollに戻すと、要素は上にスクロールして戻ります。

代替案：

  • here のように、ヘルパー関数を使用して独自のスクロールを実行します。これは実装が簡単ですが、慣性スクロールやオーバースクロールを行わないという点で必要最低限​​です。

  • CSS変換に基づいて独自の洗練されたスクロール（慣性、オーバースクロール）を実装する iScroll などのライブラリを使用します。

ただし、iScrollを使用するには少しセットアップが必要です。wrapperdivが固定の高さとスタイルで必要ですoverflow: hiddenおよびスクロールする要素には、nooverflowスタイルが必要です。 このjsFiddleデモ は、その実行方法を示しています。

1
mklement0

試してみるべき解決策がいくつかあります。以前にモバイルブラウザで試したことはないので、自分でテストする必要がありますが、次のとおりです。

  1. JQueryの.css()メソッド（または最終的な目標に応じて.animate()）を使用して、上部マージンを調整します（注：オーバーフローを非表示に変更し、テキストを内側のdivは、マージンを調整する要素になります）
  2. 最初のソリューションと同じことを行いますが、埋め込みdivの位置を相対に設定し、top属性を調整します。

これに関するサポートが必要な場合、またはこれについて質問がある場合はお知らせください。がんばろう！ :)


これらはjQuery関数ではなくCSS標準に基づく前にモバイルでテストしていませんが、動作するはずです。

1
Zachary Kniebel

次のコードを使用します。

$("body").animate( { scrollTop: 50,  },  800,  function(){
    $("body").clearQueue();
} );
0
user2823361

これらのソリューションは私にとってはうまくいきませんでした。誰かがモバイル検出に言及したことは知っていますが、彼らのアプローチは私にはうまくいきませんでした。モバイル検出を使用して、各ケースに2つの異なるCSSスタイルを提供することがついに思いつきました。理想的ではないかもしれませんが、確かに機能します。上記で提案したjsで一時的にスタイルを変更しても、うまくいきませんでした。

Divを個別にスクロールする2列のレイアウトがあり、それぞれがoverflow：scrollに設定され、bodyはoverflow：hiddenに設定する必要がありました。列の1つでscrollTopを使用する必要がありますが、解決策はありません。

Wp_is_mobile（）（Wordpress関数）を使用し、モバイルがtrueの場合、overflow：hiddenはbodyから削除され、overflow：scrollのdivにはそのCSSが削除されます。最後に、scrollTopはモバイルで機能しました。

0
Pitchpole

JQueryの.animateメソッドを使用してみてください。

$('.div').animate({ scrollTo: x; });

Xは、一番上までスクロールするdivの位置と同じです。

0
hitecherik
jQuery(document).ready(function($) {

$(".scroll").click(function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1500);
});
});

<a href="#top" class="scroll"></a>
0
johndoe