web-dev-qa-db-ja.com

-webkit-overflow-scrollingを使用するとDivスクロールがフリーズすることがある

スクロールdivに-webkit-overflow-scrollingを使用すると、ネイティブの勢いで完全にスクロールします。しかし、div自体がフリーズすることがあり、指の動きに反応しません。 2〜3秒後、再びスクロール可能になります。

この問題をどのように再現しているかわかりません。しかし、私が見るように、2つの主な動作がこの状況を作り出します。

最初に、たとえば20秒間しばらく待ってからdivにタッチすると、応答しません。数秒待ってから、再び機能するようになります。

第二に、私は数回すばやくタッチし、その後、凍結し、数秒後に再び動作を開始します。

この凍結を防ぐにはどうすればよいですか？

ioscsssafariwebkit
44
Adem

私にとって、フリーズは繰り返し可能であり、すでに上部または下部にあるときにそれぞれ上下にスクロールしようとしたときに発生しました。修正は、touchstartとtouchmoveのリスナーを追加し、これらのケースとevent.preventDefault()を検出することでした。

次のようなもので、.scrollerは、実際にスクロールするdivです（scrollTopへの変更）。

var lastY = 0; // Needed in order to determine direction of scroll.
$(".scroller").on('touchstart', function(event) {
    lastY = event.touches[0].clientY;
});

$('.scroller').on('touchmove', function(event) {
    var top = event.touches[0].clientY;

    // Determine scroll position and direction.
    var scrollTop = $(event.currentTarget).scrollTop();
    var direction = (lastY - top) < 0 ? "up" : "down";

    // FIX IT!
    if (scrollTop == 0 && direction == "up") {
      // Prevent scrolling up when already at top as this introduces a freeze.
      event.preventDefault();
    } else if (scrollTop >= (event.currentTarget.scrollHeight - event.currentTarget.outerHeight()) && direction == "down") {
      // Prevent scrolling down when already at bottom as this also introduces a freeze.
      event.preventDefault();
    }

    lastY = top;
});

これがこの恐ろしいバグに遭遇する次の貧しい魂を助けることを願っています！頑張って、戦い続けてください！

9
Wesley Reitzfeld

これは未解決の問題で、そのリンクはここにあります iosでの問題

この問題に対するSolutionsの1つは、このGitHubリンクにあります github

上記のGitHubリンクで見つかった問題によると、スクロールの問題を削除するための手順はほとんどありません。

  • Comment_ionic.js_の次の2行をアウト

    _self.el.style.overflowY = 'hidden';

self.el.style.overflowX = 'hidden';
_

  • 中断なくキーボードをスクロールするにはcordova.plugins.Keyboard.disableScroll(true)を使用します

  • $ionicConfigProvider.scrolling.jsScrolling(true)構成部分でこれをtrueに設定します。

  • また、状況によっては、overflow-scrollが「hidden」に設定されますが、「scroll」に戻されないため、画面がフリーズします。

お役に立てば幸いです。

/ *私に必要な対策、これは答えを除外します* /

/ *上記のリンクに記載されているgithubの投稿ページに完全な帰属が与えられることをここに述べます* /

5
Pritish Vaidya

動作していると思われる以下のコードを使用しました。

var scrollTimer;
$('.scroller').on('scroll',function(e){
      clearTimeout(scrollTimer);
      scrollTimer = setTimeout(() => {
        this.scrollTop = Math.max(1, Math.min(this.scrollTop, this.scrollHeight - this.clientHeight - 1));
      }, 300);
});
1
Kenneth Chan

安定したソリューション

修正を試みて何日も経った後、問題が修正されたbody要素に由来することがわかりました。スクロールがブロックされると、ページの本文がバウンスするようにユーザーに表示します： この例を参照 。ボディが修正され、スクロールフリーズバグが発生している場合、iOSデバイスでDesktop Safariを使用してボディを検査すると、「人工的に」動いていることがわかります。

この脅威にリストされているすべてのソリューションを試しましたが、githubの同様の問題にも試しました。誰も働いていませんでした。

私にとって唯一の安定した修正は、このパッケージを使用することです： body-scroll-lock andfixed要素のbodyを削除します。現時点では、固定体を楽しむことができ、スクロールフリーズのバグはありません。

現在、IOSでプログレッシブWebアプリを作成している人々に役立つことを願っています。

0
Aarbel