Jak mogę uzyskać przepełnienie div-div, aby pracować w przeglądarce mobilnej?

Mam ten kod, który działa na przeglądarkach komputerowych. Jak mogę to osiągnąć w przeglądarkach mobilnych? Zasadniczo chcę stworzyć menu, które będzie przewijane na boki.Jak mogę uzyskać przepełnienie div-div, aby pracować w przeglądarce mobilnej?

<style type="text/css"> 
    #navBar { 
     height: 55px; 
     width: 80px; 
     overflow-x: scroll; 
     overflow-y:hidden; 
     white-space: nowrap; 
    } 

    #navBar div { 
     display: inline-block; 
    } 
    </style> 


    <div id="navBar"> 
      akdhbaIDBhbfbhwhfbaibf 
      <div style="width: 100px; text-align: center; background-color: red;"> 
       <img src="" alt="Nav1" /> 
       <br /> 
       <span style="font-size: 80%">Nav1</span> 
      </div> 
      <div style=" width: 100px; text-align: center;"> 
       <img src="" alt="Nav2" /> 
       <br /> 
       <span style="font-size: 80%">Nav2</span> 
      </div> 
      <div style=" width: 100px; text-align: center; background-color: red;"> 
       <img src="" alt="Nav3" /> 
       <br /> 
       <span style="font-size: 80%">Nav3</span> 
      </div> 
    </div>

Źródło

2012-07-21 the_farmer

nie zrobił po prostu poprosić http://stackoverflow.com/questions/11590036/force-inner-elements-to-overflow-x –

Tak, mam odpowiedź od Mohamad, ale nedd ten kod do pracy na przeglądarkach komórkowych. Czy masz pomysł, jak sprawić, by ten kod działał na urządzeniu mobilnym? –

Czy możesz w pełni załadować swój kod? Pracuję dla telefonów komórkowych, mogę ci pomóc, jeśli możesz podać więcej szczegółów i na jakich urządzeniach wyglądasz, że tak się dzieje? –

można włączyć przewijanie z natywną -webkit-przelewowy przewijanie: dotyk;

<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <style> 
    div { 
     overflow-y: hidden; 
     overflow-x: scroll; 
     -webkit-overflow-scrolling: touch; 
     width: 150px; 
     border: 1px solid grey; 
    } 

    h1 { 
     width: 400px; 
    } 
    </style> 
    </head> 
    <body> 
    <div> 
     <h1>some content here</h1> 
    </div> 
    </body> 
</html>

Źródło

2012-07-22 01:36:25 gronke

dzięki za odpowiedź, po prostu umieścić ten kod na stronie html i nazwać go z mojego iPoda i mojego androida htc i nie przewijanie. Czego mi brakuje? Dzięki. –

Nie mam telefonu z Androidem, aby przetestować go dzisiaj, ale mogę przewijać div w kierunku X na moich urządzeniach z iOS z najnowszym oprogramowaniem. Z jakich wersji systemu iOS/Android korzystasz? – gronke

android: 2.33; ISO: 2.2.1 –

Jak mogę uzyskać przepełnienie div-div, aby pracować w przeglądarce mobilnej?

Odpowiedz

Powiązane problemy