web-dev-qa-db-ja.com

-webkit-overflow：touch;スクロールコンテナーの外側の要素をタップすると動作を停止します

Iphoneに非常に大きなバグがあるため、ページが使用できなくなり、解決できません。この問題に関するトピックも見つかりません。

次の画面があります。

enter image description here

中央にはdivがあり、-webkit-overflow: auto;でこのdiv内をスムーズにスクロールできるように設定されています。スクロールはまったく問題なくスムーズに機能しています。

[〜＃〜] but [〜＃〜]このdivの外側の別の要素でtouchmoveを実行するまでのみ。これを行って、scrollcontainerをもう一度スクロールしようとすると、フリーズして動かなくなってしまいます。スクロールコンテナーを数回タップすると、再びスクロールします。スクロールコンテナーのスクロールフォーカスを失い、親をスクロールしようとしています。

だから、私がこのような動きをすると：

enter image description here

これは次のようになります。

enter image description here

注：一番下のコンテナからオーバーフローdivへの1回のタッチムーブを行っています。指を離して再度スクロールしようとした後も、親divがスクロールされます。

私は短い例を作ったので、あなたはあなたのiPhone /電話で見ることができます ここ 。

この問題は、-webkit-overflow: autoを使用している場合にのみ発生します。通常のoverflow: scrollを使用すると、常に機能しますが、そうです。

-overflow-scrolling: touch;でコンテナをクリックまたはタップしているときに、目的のコンテナにスクロールフォーカスを強制する方法はありますか？

cssscrolloverflowtouchmove
15
user3561012

IOS Safariブラウザでは、スクロールを完全に制御することはできません。ただし、使用できる「ハック」があり、JSが必要です。

  • セットする position: fixed オン body,html
  • touchmoveが発生したらすぐに、body.scrollTop = 0したがって、あなたの場合には追加してください：

[〜＃〜] css [〜＃〜]

body, html {
  margin: 0;
  position: fixed;
}

[〜＃〜] js [〜＃〜]

document.addEventListener('touchmove',function (){
  document.body.scrollTop = 0
})

デバイスでテストするためのサンプルページ

ところで、これを処理するためのより良い方法は、見出し/コントロールを固定して、scrollcontainerにパディングを追加することです。これにはJSは必要ありません。 お試しください

13
Manuel Otto

私もこの問題を抱えていました。私のウェブサイトはAndroid=電話ではうまくいきましたが、iOSではスクロールをアクティブにするために数回タップする必要がありました。

ボディスクロールを無効にしてみました、これも試しました

-webkit-overflow-scrolling: touch; /* Lets it scroll lazy */

-webkit-overflow-scrolling: auto; /* Stops scrolling immediately */

カスタムスクロールバープラグインを使用する必要がありました mCustomScrollbar

このプラグインは、システムのスクロールを完全に上書きします。ここでは、JavaScriptがスクロールコンテンツの配置を制御します。それはコンテンツを作りますposition:relativeおよびtopを使用してコンテンツをスクロールします。

このプラグインが機能しない場合は、他のスクロールプラグインを試すことができます。それらはすべて同じように機能します。

1
Gautam Naik