Прокрутка родительского окна для перемещения только вертикального касания на дочернем iFrame - PullRequest
Новая
       125

Прокрутка родительского окна для перемещения только вертикального касания на дочернем iFrame

0 голосов
/ 01 августа 2020

Я хотел бы прокручивать родительское окно, когда пользователь проводит пальцем по встроенному iFrame преимущественно в вертикальном направлении, и запретить прокрутку родительского окна при преимущественно горизонтальном смахивании по iFrame. Следующий код отлично работает в Android Chrome, но не работает в iOS / iPadOS Safari.

Дочерний iFrame: 

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body {
          margin: 0;
          padding: 0;
          background-color: #000000; 
          width: 100%;
          height: 100%;
          overflow: hidden;
      } 
    </style>
  </head>
  <body>
    <script>
      var previousPageX;

      document.body.addEventListener('touchmove', onTouchMove, {passive: false});

      function onTouchMove(event) {
        const pageX = event.touches[0].pageX;
        const xDiff = previousPageX ? pageX - previousPageX : 0;
        if (event.cancelable && window.self !== window.top && Math.abs(xDiff) > 0.5) {
          event.preventDefault();
          event.stopPropagation();
          console.log("NO SCROLL");
        } else {
          console.log("SCROLL");
        }
        document.body.style.backgroundColor = "rgba(0,0,0," + (pageX / window.innerWidth) + ")";
        previousPageX = pageX;
      }
    </script>
  </body>
</html>

Родительское окно: 

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body {
          margin: 0;
          padding: 0;
          background-color: #FFFFFF; 
          width: 100%;
          height: 200vh;
      } 
    </style>    
  </head>
  <body>
    <iframe width="200" height="200" allowfullscreen="0" frameBorder="0" scrolling="no" src="http://HOST/child.html"></iframe>
  </body>
</html>

On iOS Иногда я могу заставить его прокручиваться быстрым вертикальным смахиванием, но в 95% случаев он не прокручивается должным образом. Я понимаю, что Math.abs(xDiff) > 0.5 logi c не очень хорош, но он создает приличный UX на Chrome, поэтому я надеялся на то же самое в Safari. Есть идеи, почему это не работает должным образом? Спасибо!

...