クロムモバイルボディオーバースクロールビヘイビアのすべての子ども

Question

クローム63のリリースでは、新しいoverscroll-behaviorプロパティを取得します。以前はoverflow:hiddenを使用していましたが、この新しいプロパティはモバイルでのスクロールのバグをより顕著にしています。

あなたがAndroid上でChromeで自分のデモhereをグーグルに行く場合は、バグを見ることができます。あなたは下にスクロールして画面から指を持ち上げ、バックアウトとスクロールアップしようとした場合のチャットボックスで

あなたはあなたがして上下にスクロールすることができない場合を除きていることがわかります。同じようにあなたがすべての方法をスクロールしていた場合は、指を持ち上げて、それから下にスクロールしようとすると、あなたの指を持ち上げて詰まりを取得します。これは、オーバースクロール動作が使用されているかどうかに関係なく、すべての子で発生します。 y軸に制限されるだけではなく、x軸でも起こります。

あなたはこれがユーザーにとって非常に迷惑であると言うことができます。

私が考えることができる（まだ実装されていない）唯一の解決策は、スクロールイベントを待ち受けることです。ユーザーが要素をスクロールすると、スクロールを0.1pxだけ調整します。これは非常に高価であり、スクロールイベントが常にモバイル上で起動してスナップ効果を引き起こすとは限らないことがわかっています（そして、ユーザーがスクロールする動作を壊すような他の効果あたかも指を離したかのように）。 contain

のグーグルのdefentionからも

が含まれている - 防止のチェーンをスクロールします。スクロールは 祖先には伝播しませんが、ノード内のローカルエフェクトが表示されます。例えば、 アンドロイドまたは彼らはスクロール境界を襲ってきたときにユーザーに通知 iOSのラバーバンド効果のオーバースクロールグロー効果。注： overscroll-behaviourを使用しています.html要素にcontainsを含めると、 はナビゲーション操作をオーバースキャンしません。

これはスペックが壊れているので、全く発生しません。私の知る限り、これは携帯用クロームのすべてのバージョンで発生し、WebViewの、ウェブサイト、またはフルスクリーンがホームページに追加するのかどうかは問題ではありません言うことができるように

。

バグトラッカーがある場合でも、素晴らしいものになるようなアプリの構造を完全に変更する必要のある回避策があるかどうかを知っている人は誰でも知っています。

更新： バグがhere

Answer 1

クロム65ではこの問題が修正されました。

Answer 2

で働いているので、これは私はそれが動作します使用されるが、ユーザが小さなジャンプが表示されますが、それは私が一緒に暮らすことができるのトレードオフだ回避策です。

document.querySelector("#somediv").addEventListener("touchstart", function() { 

     var clientHeight = this.clientHeight; 
     var scrollHeight = this.scrollHeight; 
     var scrollTop = this.scrollTop; 
     var scroll = scrollHeight - scrollTop; 
     var scrollTo; 

     if(scroll == clientHeight) scrollTo = scrollTop - 1; 
     if(scroll == scrollHeight) scrollTo = scrollTop + 1; 

     if(scrollTo) return this.scrollTop = scrollTo; 

    });