在Android上溢出滚动不起作用？

yupp，我是那些想用HTML5开发移动应用程序的人之一。在Android和iOS上。听起来很疯狂，我知道。可悲的是我有一个问题...在Android上溢出滚动不起作用？

我有一个经典的应用程序的页脚和标题，应该可滚动的内容。在iOS上，这太棒了！页眉和页脚的顶部/底部有“position：fixed”，内容使用“-webkit-overflow-scrolling：touch;”的本地滚动动画。我知道“-webkit-overflow-scrolling：touch;”在Android上不可用，但该属性不仅被忽略，滚动根本不起作用！

所以，请任何人都可以告诉我如何让iOS上的“原生”滚动和使用相同的标记和样式在Android上“滚动”？例如。如果我可以使用本地滚动动态 - 很好，如果不是 - 平滑滚动。

注：我只需要支持最新版本的现在，所以我不想JS-回退样iScroll 4.

.content { 
    // no(!) scrolling on Android - why? 
    overflow-x: hidden; 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch; 
}

的jsfiddle（没有的Android 2.3！）：http://jsfiddle.net/bmJxN/

谢谢！

来源

2012-12-18 Pipo

-2

它现在会工作，这有很多原因。你可以做的是使用任何第三方库来完成这项任务。我用从GitHub上的开源库之一，得到的结果： - 库是here

希望这将是有用的......

来源

2012-12-18 13:26:23

这似乎用iScroll和jQuery Mobile的 - 这不就是可以在Android 4，没有任何JS？我想保持我的样板/ JS代码低以获得更多速度（即使我必须牺牲旧的Android版本）。 – Pipo

即使我试图避免使用js ...但最终我意识到js是唯一的解决方案...如果您找到更好的解决方案，请告诉我。 –

对不起，挖了一个老的文章，但因为似乎没有满意的答案我想我会加入我的2cents给像我这样最终结局的人。

谈移动的WebApp滚动的一般问题，滚动在移动浏览器&势头是一种痛苦，因为有各种各样不同的平台上的不同实现的：！！！Android浏览器=铬= Safari浏览器=歌剧等和Android < 3不支持滚动以及较新版本，就像的iOS < 5.

的情况是复杂的，并且可以MOT对于其中大多数设备是在iOS 5或6的iOS一个问题，但它Android碎片是一个真正的问题。

为了更好地掌握这一点，您可以阅读this。

为了回应这个问题，正如您已经指出的那样，有诸如iScroll或更近期的回退，Overthrow可以更好地处理本地实现和JS回退。最近，“金融时报”团队发布了FTScroller库，看起来也很有前景。

现在对于你的情况，如果你只是想支持Android 4+ &的iOS5 +，你应该能够使其与使用上的滚动内容只有固定的定位和

overflow: auto; 
-webkit-overflow-scrolling: touch;

势头工作都（你如果使用自动属性，则不需要指定“overflow-x：hidden”）。如果没有，你可能在你的固定位置或其他CSS布局属性中犯了错误？（继承身体道具等）。

更新：我应该在发布我的答案之前完成此操作，但我只是测试了我的Nexus4上的小提琴，并且您的代码在Chrome中可以正常工作：这可能意味着您在没有Android 4+或较旧设备浏览器不支持溢出属性？

旁注：

请注意，尽管动量效应是在默认情况下在Android & iOS的活跃，那就是将应用于特定于平台的势头：它们彼此不同，有违一个JS填充工具这使滚动动力平台无关。此外，在iOS上，即使使用较新的设备和Android 4.0+，情况变得更好（在之前的大多数人眼中，这种情况已经非常难以使用），但滚动比Android更流畅。
在iOS上，您将有反弹影响，原产于平台，而不是在Android的原生浏览器UX不包括该弹跳效果（这是奇怪，因为这种效应在OS UX的其他部分，如存在设置）。你可以通过一个图书馆在Android上实现这一目标，但要小心不可思议的山谷。甚至存在了新版浏览器，如没有在Android浏览器是在此间指出，一个滚动位置指示器的
其他问题：http://barrow.io/overflow-scrolling。在iOS上，您可能在整个页面上出现臭名昭着的“橡皮筋滚动效果”问题，同时在“How to disable rubber band in iOS web apps?”中指出的滚动特定元素。你将有一个类似WP的WP8 webApps。

这一切说，作为滚动简单的东西是远远不够完善移动的WebApp，并且它甚至在网页视图性能方面更差（开发PhoneGap的应用程序，例如当）。祝你好运！

来源

2013-09-17 09:59:11

添加附加的注释这里由于行为似乎并没有在其他地方得到适当的解释。

当使用“溢出：汽车”或“溢出：滚动” Android版Chrome浏览显示滚动条指标只是暂时在页面加载hidding之前（不像桌面浏览器的典型行为）。为了使这些指标复杂化，这些指标非常薄且半透明，很容易被忽略。

这可能不是一般的页面滚动的问题;但是，当滚动条丢失以指示其他内容时，用于滚动页面区域（例如整页应用程序）时会出现严重的UX问题。

为了纠正这一点，你可以添加自定义滚动条。当使用'overflow：auto'时，只有当内容超出可见区域时才会显示这些滚动条（就像在桌面浏览器上一样）。

下面的代码添加到您的CSS：

::-webkit-scrollbar-track { 
    background-color: #F5F5F5; 
} 

::-webkit-scrollbar { 
    width: 12px; 
    background-color: rgba(0,0,0,0); 
} 

::-webkit-scrollbar:hover { 
    background-color: rgba(0, 0, 0, 0.09); 
} 

::-webkit-scrollbar-thumb { 
    background: rgba(0, 0, 0, 0.3); 
    border: 2px solid #F5F5F5; 
    -webkit-border-radius: 100px; 
} 

::-webkit-scrollbar-thumb:active { 
    background: rgba(0,0,0,0.61); 
    -webkit-border-radius: 100px; 
}

您也可以与下面的代码添加垂直箭头。类似的水平箭头可以通过交换水平垂直来包含。

::-webkit-scrollbar-button { 
    width: 12px; 
    height: 12px; 
    background-color: #F5F5F5; 
    background-size: 100%; 
} 

::-webkit-scrollbar-button:vertical:increment { 
    background-image: url('../images/arrows/arrow-down.png'); 
} 

::-webkit-scrollbar-button:vertical:decrement { 
    background-image: url('../images/arrows/arrow-up.png'); 
}

注意最后两行需要箭头图像是存在，但无法将这些添加到帖子中（可能是由于它们的小尺寸）。

其他滚动条属性也可以定制。下面的指南提供了详细的解释：

http://poselab.com/en/custom-scrollbars-in-webkit/

来源

2016-02-23 09:17:57 Bit32

在Android上溢出滚动不起作用？

回答

相关问题