5

デスクトップブラウザで動作するこのコードがあります。モバイル ブラウザーでこの動作を実現するにはどうすればよいですか? 基本的には、横にスクロールするメニューを作成したいと考えています。

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

1 に答える 1

4

-webkit-overflow-scrolling: touch; でネイティブ スクロールを有効にできます。

<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-22T01:36:25.293 に答える