web-dev-qa-db-ja.com

ウェブサイトはiPhone（Safari）でスクロールすることをしばしば拒否します

何らかの理由で、私のWebサイトはスクロールを拒否することがよくありますが、iPhoneのみです。

doが機能するデバイス/ブラウザ：

  • iPad（Safari）
  • Androidフォン（Chrome）
  • PC（Chrome（DevToolsエミュレーションを含む）およびIE11）

バグを示すデバイス：

  • アイフォーン4エス
  • iPhone 5
  • iphone 6

明らかにiPhoneに関連しています。iPhoneだけでスクロールするとタイムアウトになるようなものです。バグについてできるだけ詳しく説明するようにします。

サイトを読み込んだ後、スクロールできるようになるまで5秒ほど待たなければなりません。次に、少し下にスクロールします。スクロール中は、スクロールバーが表示されます（通常どおり）。スクロールバーがフェードすると、反対方向のスクロールが5秒間ブロックされます。スクロールして反対方向にスクロールするとbeforeスクロールバーがフェードし、期待どおりにスクロールします。

また、スクロール方向を変更したい場合は、スクロールを「初期化」するために2回スワイプする必要があるようなものです。 scroll、wait、scrollは、実際にその方向にスクロールします。

そう：

  • 下にスクロール（scrolls）、待って、下にスクロール（scrolls）- 同じ方向のスクロール
  • 上にスクロール（scrolls）、待って、上にスクロール（scrolls）- 同じ方向のスクロール
  • 下にスクロール（scrolls）、上にスクロール（scrolls）--- スクロールバーがフェードする前に方向を変える
  • 下にスクロール（scrolls）、待って、上にスクロール（nothing）- 方向転換
  • 下にスクロール（scrolls）、待って、上にスクロール（nothing）、待って、上にスクロール（scrolls）方向を変えて、スクロールして2回待つ必要がある

waitで、3秒ほど待ちます。反対方向にスクロールするときに十分長く待たないと、スクロールしません。

ウェブサイトはMeteorJSとjQueryを使用しています。 iScroll や FastClick などのモバイルユーティリティスクリプトを試しましたが、役に立たないようです。

javascripthtmlcssiphone
12
Richard de Wit

さて、スクロールをブロックしているのはメニューであることがわかったので、何時間もコメントを書き始めました。

次のスタイルで背景に隠されたメニューがあります。

menu {
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  overflow-y: scroll;
}

z-indexが-1の場合、z-indexが高いものが前にあると相互作用しなくなると本当に思っていましたが、iPhoneではどうやらそうではありません（Androidそうです..）。

メニューが開いていないときにoverflow-y: scroll;をhiddenに変更すると（メニューが開いているときはscrollに）修正されます。また、メニューを完全に非表示にすることもお勧めします。

3
Richard de Wit

編集：このバグについてApple）に話しました。彼らはその存在を認めましたが、優先順位を付けないことにしました。このバグがあなたを傷つけている場合は、 https://bugs.webkit.org/show_bug.cgi?id=169509 にコメントしてください。

バグは何ですか：

私にとっての問題は、スクロールレイヤーの最初/最後に到達し、次のジェスチャの開始が同じ方向に進んだ場合にのみ発生します。次に、Webkitホイールイベントは、そのように進むことができないと判断し、スクロールをまったく許可しません。

これには回避策があります。スクロールレイヤーがスクロールの最初または最後に到達しないようにしてください。

div.addEventListener('scroll',() =>
    div.scrollTop = Math.max(1, Math.min(div.scrollTop,
                                         div.scrollHeight - div.clientHeight - 1));
);

まだウェブキットに関わっている人がこれを修正できることを願っています（私はブラウザコードから少し引退しています）、それはどこでもiosのスクロール可能なレイヤーを傷つけています。

6
Noam Rosenthal

IOSでも同様の問題が発生しました。

たくさんの髪の毛を抜いた後、私は私のために働く解決策を見つけました： WesRによる応答

アイデアは、タッチスタートイベントをリッスンし、タッチのY位置をキャプチャし、タッチムーブをリッスンし、そのタッチのY位置をキャプチャして、タッチ方向を決定することです。すでに上部にあり、方向が「上」の場合は、event.preventDefault()でブラウザが上にスクロールしようとするのを停止し、ページの下部で下にスクロールする場合も同じようにします。

これは、スクロール境界での同じ方向のスクロールに関する同様の問題でした。ユースケースに関係がない場合は申し訳ありませんが、OP：Pを誤解した可能性があります。

0
HazeyAce

メニュースクロールでも同じ問題が発生しました。メニューコンテナのサイズが変更された後、スクロールを拒否することがよくありました（問題はiPhoneでのみ発生します）。私の場合、cssオーバーフロースタイルを切り替えるだけで解決策が見つかりました。私がコンテナに持っていたように、これらのスタイル

.container {    
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 280px;
    overflow-x: hidden;
    overflow-y: auto;
}

メニューを開くたびに、このスクリプトを実行するだけです

$('.container').css('overflow-y', 'hidden');
setTimeout(function () {
  $('.container').css('overflow-y', 'scroll');
}, 50);
0
Hayk Ghonakhchyan