如何让div滚动溢出x在移动浏览器上工作？ [英] How can I get div scroll overflow-x to work on a mobile browser?
本文介绍了如何让div滚动溢出x在移动浏览器上工作？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这个代码适用于桌面浏览器。如何在移动浏览器上实现此行为？基本上我想创建一个滚动到两侧的菜单。
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>
推荐答案
您可以使用-webkit-overflow-滚动：触摸;
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>
这篇关于如何让div滚动溢出x在移动浏览器上工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
