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

2019-06-20 17:11:46 阅读：330 来源： 互联网

标签：android web-applications scroll native momentum

yupp,我是其中一个想要用HTML5开发移动应用程序的人.在Android和iOS上.听起来很疯狂我知道.可悲的是我有问题……

我有一个经典的应用程序,页脚和标题以及应该可滚动的内容.在iOS上这太棒了！页眉和页脚的“位置：固定”到顶部/底部,内容使用原生滚动动量“-webkit-overflow-scrolling：touch;”.我知道“-webkit-overflow-scrolling：touch;”在Android上不可用,但此属性不仅被忽略,滚动根本不起作用！

所以,任何人都可以告诉我如何在iOS上进行“原生”滚动,并在Android上使用相同的标记和样式进行“良好”滚动操作？例如.如果我可以使用具有动量的原生滚动 – 很棒,如果不是 – 纯滚动.

注意：我现在只需要支持最新版本(没有Android 2.3！),所以我不想要像iScroll 4这样的JS-Fallback.

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

JSFiddle：http://jsfiddle.net/bmJxN/

谢谢！

解决方法:

很抱歉挖了一个旧帖子,但因为似乎没有令人满意的答案,我想我会为像我这样在这里结束的任何人添加我的2cents.

谈论移动WebApps中滚动的一般问题,滚动和放大移动浏览器的动力很大,因为根据平台有各种不同的实现：Android浏览器！= Chrome！= Safari！= opera等,以及Android< 3不支持滚动以及更新的版本,就像iOS< 5. 情况很复杂,对于大多数设备都在iOS 5或6上的iOS来说可能是一个问题,但这是Android碎片的真正问题. 为了更好地掌握这一点,你可以阅读this.

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

现在针对您的情况,如果您只想支持Android 4& iOS5,你应该能够只使用固定定位和动量使它工作

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

在您的可滚动内容上(如果使用auto属性,则不需要指定“overflow-x：hidden”).如果没有,你可能在你的固定位置或其他一些css布局属性中犯了错误？ (继承了身体道具等).

更新：我应该在发布我的答案之前完成此操作,但我刚刚测试了我的Nexus4上的小提琴并且您的代码在Chrome中运行：这可能意味着您在没有Android 4的旧设备或没有支持的浏览器上进行了测试溢出属性？

附注：

>请注意,虽然android&默认情况下动量效果处于活动状态iOS,它是将应用的平台特定动力：它们彼此不同,这与使得滚动动量平台无关的JS polyfill相反.此外,在iOS上,滚动比Android更平滑,即使新设备和Android 4.0的情况变得更好(在此之前,在大多数人口稠密的视图中它都很难用).
>在iOS上,您将拥有本机平台的弹跳效果,但不会在Android上,因为本机浏览器UX不包含此弹跳效果(这很奇怪,因为此效果存在于OS UX的其他部分,例如设置) .您可以在Android上使用库来实现这一点,但要注意不可思议的山谷.
>即使在较新的浏览器上也存在其他问题,例如Android浏览器中没有滚动位置指示器,如下所示：http://barrow.io/overflow-scrolling.在iOS上,您可能在整个页面上遇到臭名昭着的“橡皮筋滚动效果”问题如“How to disable rubber band in iOS web apps?”中所指出的那样在特定元素内滚动.对于WP8 webApps,您将拥有类似的pb.

所有这些都说滚动简单的东西在移动WebApps中远非完美,而且在WebViews性能方面更糟糕(例如在开发PhoneGap应用程序时).祝好运！

标签：android,web-applications,scroll,native,momentum
来源： https://codeday.me/bug/20190620/1246335.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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