如何讓div滾動溢出-x在移動瀏覽器上工作？

我有這個代碼可以在桌面瀏覽器上運行。我如何在移動瀏覽器上實現這種行爲？基本上我想創建一個滾動到兩邊的菜單。如何讓div滾動溢出-x在移動瀏覽器上工作？

<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>

來源

2012-07-21 the_farmer

Didnt你剛纔問http://stackoverflow.com/questions/11590036/force-inner-elements-to-overflow-x – 2012-07-21 10:21:21

是的，我從穆罕默德的答案，但我NEDD此代碼工作在手機瀏覽器上。你有想法如何使這個代碼在移動設備上工作？ – 2012-07-21 14:02:39

你能完全上傳你的代碼嗎？我爲手機工作，如果你可以提供更多的細節，你可以幫助你，看看這是什麼設備？ – 2012-07-21 14:30:00

您可以啓用原生滾動與-webkit-溢出滾動：觸摸;

<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>

來源

2012-07-22 01:36:25 gronke

感謝您的答覆，我只是把這個代碼在HTML頁面，並從我的iPod和從我的android htc調用它，它不滾動。我失蹤了什麼？謝謝。 – 2012-07-22 08:08:18

我今天沒有安卓手機來測試它，但我可以用最新的固件在我的iOS設備上以x方向滾動div。你使用哪個版本的iOS/Android？ – gronke 2012-07-22 08:25:57

android：2.33; ISO：2.2.1 – 2012-07-22 08:34:08

如何讓div滾動溢出-x在移動瀏覽器上工作？

回答

相關問題