PhoneGap/Cordova: Zapobieganie przewijaniu w poziomie

Mam aplikację zbudowaną na Cordova, a na niektórych moich stronach mogę przewijać poziomo z mojej zawartości do białej przestrzeni.PhoneGap/Cordova: Zapobieganie przewijaniu w poziomie

To dziwne, ponieważ nie mam tam nic poza moim #wrapper, który jest ustawiony na width: 100%.

Więc zastanawiałem się, czy istnieje sposób, w jaki mogę wyłączyć przewijanie w poziomie w aplikacji w ogóle?

UPDATE:

kod na stronie zgodnie z żądaniem:

body { 
    background-color: #fff; 
    font-family:Arial, Helvetica, sans-serif; 
    color: #b7b8b9; 
    height: 100%; 
    width: 100%; 
} 

iframe{ 
    border: none; 
    width: 100%; 
    /*margin-top: 50px;*/ 


    } 

#header{ 
    height: 50px; 
    width: 100%; 
} 


<body> 
     <div id="wrapper"> 
     <div id="header"> 
      <div class="headerback"><a href="index.html">Home</a></div> 
      <div class="headerrefresh"><script>var pathname = window.location.pathname;</script><script>document.write('<a href="'+pathname+'">Refresh</a>')</script></div> 
      <div class="headertitle"><h2>Get the Look</h2></div> 

     </div><!--HEADER--> 
    <iframe src="http://www.mbff.com.au/getthelook"></iframe> 
    </div> 
    </body>

This is what happens on horizontal scroll

Źródło

2012-06-26 MeltingDog

Czy przewija się efekt odrzucenia treści? – nhahtdh

@nhahtdh nie, zachowuje się tak, jakby element div rozciąga się poza opakowanie - tylko nieznacznie przewija się w białą przestrzeń – MeltingDog

Nie mogę odtworzyć problemu na urządzeniu. Czy możesz opublikować zrzut ekranu? – nhahtdh

próba debugowania swoją stronę w Chrome (WebKit) z dokładnymi wymiarami urządzenia. Rozwiązuje to większość problemów związanych z renderowaniem.

Nie znam konkretnego problemu tutaj, ale wygląda na to, że jeden z twoich elementów przepływa poza opakowanie. Można na przykład spróbować tego w css:

div.wrapper { overflow: hidden; width: inherit; }

Chociaż to może być lepszy pomysł, aby dowiedzieć się, dlaczego Twoja strona rozwija się poziomo?

Źródło

2012-07-04 09:36:43

Tak, dzięki Justus. To była niepoprawna szerokość ciała na moim iPhone'owym CSS – MeltingDog

Potwierdzono, że jest to poprawna poprawka z Cordova 6.3.1, działająca na systemie Android 6 i 7 –

// Phone Gap disable only horizontal scrolling in Android. 

// Add this code in your Phone Gap Main Activity.Initially Declare the variable 

private float m_downX; 

//Then add this code after loadUrl 

this.appView.setOnTouchListener(new View.OnTouchListener() { 
    public boolean onTouch(View v, MotionEvent event) { 

     switch (event.getAction()) { 
      case MotionEvent.ACTION_DOWN: { 
       // save the x 
       m_downX = event.getX(); 
      } 
      break; 

      case MotionEvent.ACTION_MOVE: 
      case MotionEvent.ACTION_CANCEL: 
      case MotionEvent.ACTION_UP: { 
       // set x so that it doesn't move 
       event.setLocation(m_downX, event.getY()); 
      } 
      break; 
     } 
     return false; 
    } 
});

Źródło

2012-09-25 07:39:59

Dziękuję bardzo! –

spróbuj dodać następujący kod do pliku .html:

document.body.addEventListener('touchmove', function(event) { 
    event.preventDefault(); 
}, false);

Źródło

2013-03-26 18:37:53 Gustus

Zapobiegło to nawet przewijaniu w pionie. –

jak usunąć ten lsitener po tym, próbowałem removeeventlistener, ale nadal nie jest przewijanie –

Szukałem rozwiązania tego problemu przez długi czas. W końcu rozwiązałem to w następujący sposób. ustawić styl body i html tags:

position: fixed; 
width: 100%; 
height: 100%; 
overflow: hidden;

Potem dodałem div do body i ustawić styl dla niej:

overflow-y: auto; 
height: 100%;

Tak, mam ciało stałe, które zawiera div z pionowym paskiem przewijania.

Źródło

2015-07-09 14:19:17

Dla kompletności, myślałem, że odpowiedź, która korzysta z oficjalnej metody robi coś takiego za pomocą znacznika preference należy dodać:

<preference name="DisallowOverscroll" value="true"/>

Obsługiwane przez Android i iOS zgodnie z documentation.

domyślna: false

ustawiona na wartość true, jeśli nie chcesz, aby wyświetlić interfejs żadnej informacji zwrotnej, gdy użytkownicy przewinąć przeszłości początku lub na końcu treści. W przypadku iOS przesuwanie gestów powoduje przywracanie zawartości do pierwotnej pozycji. na urządzeniach z Androidem wytwarzają bardziej subtelny efekt świecący wzdłuż górnej lub dolnej krawędzi zawartości.

Źródło

2017-07-13 13:35:32 Script47

Uwaga: w sensie technicznym, to jest poprawne, ale niektóre osoby mogą doświadczać bardzo małego przeskalowania (w moim przypadku był to pojedynczy piksel), i [ ta odpowiedź] (https://stackoverflow.com/a/31320257/2374365) pracowała z tym –

PhoneGap/Cordova: Zapobieganie przewijaniu w poziomie

Odpowiedz

Powiązane problemy