Poziomo przewijany div, który zawiera pionowe przewijane div, nie będzie przewijany w poziomie na iOS.

Question

Wyobraź sobie przewijany poziomo div, który zawiera dwa pionowo przesuwne elementy div.
Należy przewijać w poziomie, aby nawigować, a następnie przewijać w pionie w wewnętrznych elementach div, aby odczytać treść.

/* MINIMAL RESET */ 
 
body, html { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
* { box-sizing: border-box; }

<div style=" 
 
      overflow-x: scroll; 
 
      white-space: nowrap; 
 
      width: 100%; 
 
      height: 100%; 
 
      position: relative; 
 
      background-color: black; 
 
      "> 
 
    <div style=" 
 
       width: 100%; 
 
       height: 100%; 
 
       left: 0%; 
 
       top: 0px; 
 
       margin: 0px; 
 
       position: absolute; 
 
       display: inline-block; 
 
       background-color: green; 
 
       "> 
 
    <div style=" 
 
       width: 100%; 
 
       height: 100%; 
 
       overflow-y: scroll; 
 
       "> 
 
     <div style=" 
 
        width: 100%; 
 
        height: 200%; 
 
        "> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div style=" 
 
       width: 100%; 
 
       height: 100%; 
 
       left: 100%; 
 
       top: 0px; 
 
       margin: 0px; 
 
       position: absolute; 
 
       display: inline-block; 
 
       background-color: blue; 
 
       "> 
 
    <div style=" 
 
       width: 100%; 
 
       height: 100%; 
 
       overflow-y: scroll; 
 
       "> 
 
     <div style=" 
 
        width: 100%; 
 
        height: 200%; 
 
        "> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Po obejrzeniu this question zorientowali się, że można ustawić -webkit-overflow-scrolling : 'touch', ale w moim przypadku trzeba szukać innego rozwiązania, bo manipulować scroller poziomego podczas przewijania zostało zakończone i touch-scroll w tym przypadku go zepsuć.

Poniższy przykład działa dobrze w przeglądarce Chrome, także w Chrome na Androida, jednak w systemie iOS nie można przewijać w poziomie z uwagi na ostrość danych wejściowych, które zawsze są przesyłane do pionowych przewijarek.

Jak ustawić przewijanie poziome i pionowe dla iOS, aby działał tak samo, jak w Chrome?

Answer 1

Wydaje mi się, że lepiej byłoby zająć się podejściem do karuzeli, w którym przesuwałbyś pojemnik podczas przesuwania, zamiast używać "natywnego" zachowania przewijania.

W ten sposób będziesz mógł przesuwać swoje DIV w lewo i prawo za pomocą JS oraz przewijać w górę iw dół za pomocą zwykłego przewijania.

Answer 2

trzeba wymienić cały overflow-*AXIS* do prostego overflowauto:

<div style="overflow: auto; white-space: nowrap; width: 100%; height: 100%; position: relative; background-color: black;"> 
    <div style="width: 100%; height: 100%; left: 0%; top: 0px; margin: 0px; position: absolute; display: inline-block; background-color: green;"> 
     <div style="width: 100%; height: 100%; overflow: auto;"> 
      <div style="width: 100%; height: 200%;"></div> 
     </div> 
    </div> 
    <div style="width: 100%; height: 100%; left: 100%; top: 0px; margin: 0px; position: absolute; display: inline-block; background-color: blue;"> 
     <div style="width: 100%; height: 100%; overflow: auto;"> 
      <div style="width: 100%; height: 200%;"></div> 
     </div> 
    </div> 
    </div>