当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - How can I get div scroll overflow-x to work on a mobile browser?

问题描述:

I have this code that works on desktop browsers. How can I achieve this behaviour on mobile browsers? Basically I want to create a menu which will scroll to the sides.

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

网友答案:

You can enable native scrolling with -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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: