我正在尝试在iPhone / Android设备上创建一个感觉像本机应用的网站。
我已设法将其设置为html和body不滚动,我有一个内容<div>
,这是可滚动的部分。
但是,设置
时overflow-x:hidden
只允许垂直滚动我仍然在iPhone(Chrome和Safari)上获得水平滚动行为。您可以看到滚动条属于.content元素。设置
overflow:hidden
按预期工作并禁用所有滚动。
对我来说,它看起来像Chrome上的一个错误。
代码:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.scroll {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.content {
height: 2000px;
margin: 10px;
overflow-x: hidden;
background: linear-gradient(to bottom, #f00 0%, #00f 50%);
}
</style>
</head>
<body>
<div class="scroll">
<div class="scroll">
<div class="content">
<div style="height: 20px; width: 1000px; background: black;"></div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分:4)
您是否有理由使用单独的元素滚动而不让html元素执行此操作?
我发现手机在不使用html元素作为滚动时可能非常有气质,实际上一些较旧的Android平台会拒绝滚动,如果它不在html元素上(虽然我意识到你指定的只是iOS中的问题)。
关于你的实际问题,我认为这是因为同一元素上存在冲突溢出。
overflow-y: auto;
overflow-x: hidden;
您可能希望有一个元素执行overflow-x,然后将其放在另一个处理滚动的元素内。
aka:将.content
元素设为max-width: 100%;
并提取重复的.scroll
元素
答案 1 :(得分:0)
在iOS 10.3.3:html上,body {overflow-x:hidden}完美无缺。