34

スクロール DIV 内の特定の場所にスクロールしようとしています。現在、デスクトップ ブラウザではうまく機能する jQuery scrollTop() 関数でピクセル オフセットを使用していますが、Google の Chrome Android ブラウザを除いて、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;

2013 年 3 月 11 日編集:

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

バグ レポートの 1 人のユーザーが回避策を提案しました。

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

4

14 に答える 14

10

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

setTimeout( function() {
    $(div).scrollTop(0)
}, 500 );
于 2014-08-27T10:14:36.423 に答える
7

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

于 2013-01-20T07:04:32.130 に答える
4

ここで答えを見つけました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
}

また

$('body')の代わりに単に使用し$('html, body')ます。

于 2016-05-10T09:23:22.230 に答える
3

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

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

これまでのところ、すべてのデバイスとブラウザーで最適に機能します。

于 2019-04-17T05:54:30.287 に答える
2

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

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

これについて何か助けが必要な場合、またはこれについてさらに質問がある場合はお知らせください。幸運を！:)


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

于 2012-09-01T13:54:05.270 に答える
1

overflow@Allan Nienhuis の回答で推奨されているように、プロパティを一時的に「非表示」に設定すると、たとえば Android では機能しません(4.0.3たとえば、Kindle Fire 2 が実行されているもの) - にoverflow戻すとscroll、要素がスクロールしますトップに戻ります。

代替案:

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

  • CSS 変換に基づく独自の高度なスクロール (慣性、オーバースクロール) を実装するiScrollなどのライブラリを使用します。

ただし、iScroll を使用するには少し設定が必要です。高さとスタイルが固定されたラッパー が必要であり、スクロールする要素にはスタイルを設定しないでください。この jsFiddle デモは、その方法を示しています。divoverflow: hidden overflow

于 2013-08-27T21:34:56.970 に答える
0

これを試しましたか？

$("html").scrollTop(0);
于 2013-03-20T06:06:50.317 に答える
0

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

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

x は、一番上までスクロールしたい div の位置と同じです。

于 2013-01-21T12:11:27.247 に答える
0 

  
$(document).ready(function (){
  $(window).scroll(function(){
        if($(this).scrollTop() > 100){
            $('.scrollup').fadeIn();
        } 
        else{
            $('.scrollup').fadeOut();
        }
    });
  
  $('.scrollup').click(function(){
    if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {           
      window.scrollTo(0,0);
    }
    else{
      $('html,body').animate({
        scrollTop: 0
        }, 500, function(){
        $('html,body').clearQueue();
      });
    }
  });              
});
body{
  height: 1500px;
}

.scrollup {
    bottom: 135px;
    height: 40px;
    width: 40px;
    display: none;
    background: #000;
    border: 2px solid #fff;
    border-radius: 100%;
    box-shadow: 1px 3px 5px #000;
    text-align: center;
    font-size: 25px;
    color: #fff;
    cursor: pointer;
    position: fixed;
    right: 12px;
    line-height: 36px;
    z-index: 25;
}

svg{
  fill: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrollup">
    <svg height="35" viewBox="0 0 512 512" width="30">
        <polygon points="396.6,352 416,331.3 256,160 96,331.3 115.3,352 256,201.5 "/>
    </svg>
</div>

于 2021-09-21T15:29:34.243 に答える