-webkit-overflow-scrolling：touch; 在苹果的iOS8中rest

我正在使用-webkit-overflow-scrolling:touch的web应用程序-webkit-overflow-scrolling:touch在几个地方-webkit-overflow-scrolling:touch ，以使飞越div的惯性滚动。

由于更新到IOS8， -webkit-overflow-scrolling: touch停止你能够滚动什么，我迄今唯一能够解决这个问题的方法是通过删除-webkit-overflow-scrolling: touch标准粘滞滚动。 请帮忙！

下面是iOS5,6和7中的一个标准类的示例： 

 .dashboardScroll { height: 100%; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; /*MAKES OVERFLOWN OBJECTS HAVE INERTIA SCROLLING*/ -webkit-transform: translateZ(0px); /*HELPS THE ABOVE WORK IN IOS5*/ }

我有一个类似的问题，在iOS 5，6和7中滚动的（相当复杂的）嵌套的可滚​​动div，但间歇性地无法在iOS 8.1中滚动。

我find的解决scheme是使用GPU删除所有使用浏览器的CSS： 

 -webkit-transform: translateZ(0px); -webkit-transform: translate3d(0,0,0); -webkit-perspective: 1000;

通过这样做，“-webkit-overflow-scrolling：touch” 仍然可以包括在内，仍然正常运作。

它的确意味着牺牲了上面的黑客在iOS的早期版本中的滚动性能（对于我来说，可疑的）的收益，但是在惯性滚动和惯性滚动之间的select中，惯性滚动被认为更重要（并且我们不支持iOS 5了）。

我现阶段不能说这个冲突存在的原因， 这可能是这些function的一个不好的实现，但我怀疑在CSS中引起了一些深层的问题。 我目前正在尝试创build一个简化的HTML / CSS / JSconfiguration来演示它，但是可能需要大量的标记结构和大量的dynamic数据才能实现。

附录：但是，我不得不向我们的客户指出，如果即使有了这个修复，用户也开始尝试滚动一个不可滚动的元素，她将不得不等待一秒钟后才能滚动滚动元素。 这是本机行为。

我有这个问题，并find了解决办法。 解决的办法是，你必须把你的内容放到两个容器中，例如:( .dashboardScroll> .dashboardScroll-inner），并给内部容器“.dashboardScroll-inner”多一个高于父级的“.dashboardScroll”通过这个css3属性 

 .dashboardScroll-inner { height: calc(100% + 1px);}

看看这个：

http://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/

否则，如果你不能添加另一个容器使用这个： 

 .dashboardScroll:after { height: calc(100% + 1px);}

我在cordovanetworking应用程序中遇到同样的问题。 对我来说，问题是我有一个animation的父母<div> ，并有属性animation-fill-mode: forwards;

删除这个属性解决了这个问题，并修复了破碎的溢出滚动。

我以前的答案无法解决问题。 所以几个小时后，iScroll库试了一下iScroll 。 我知道包括一个额外的库（和相当大）添加滚动只是iOS不是很好，但这是对我来说是什么工作。 只要按照自述，lite版本就足够了。

缺点：

  • Android上滚动现在看起来像废话，它不是原生的。
  • 通过滚动来刷新页面是不可能的
  • 您需要为Android应用另一个修补程序： 点击无效

我不确定我是否会使用它，但是如果你需要的话，请给它一个。

我尝试了所有的解决scheme，但没有成功 我能通过让属性-webkit-overflow-scrolling：touch来使它工作。 在可滚动的div和父容器上。 

 div.container { -webkit-overflow-scrolling: touch; } div.container > div.scrollable { -webkit-overflow-scrolling: touch; overflow-y: auto; }

我也遇到了一些麻烦，但情况稍有不同。

我确实有我的div有惯性，没有任何问题。

我有一个简单的JSFiddle，你可以看看。

https://jsfiddle.net/SergioM/57f2da87/17/ 

 .scrollable { width:100%; height:200px; -webkit-overflow-scrolling:touch; overflow:scroll; }

希望能帮助到你。

我在使用angular引导模式时遇到了这个问题。 我通过创build自己的样式表来修复它，并删除媒体查询中的固定宽度和边距。

原版的： 

  .modal-dialog { position: relative; width: auto; margin: 10px; } @media (min-width: 768px) { .modal-dialog { width: 600px; margin: 30px auto; } .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } .modal-sm { width: 300px; } } @media (min-width: 992px) { .modal-lg { width: 900px; } }

变化： 

 .modal-dialog { margin: 0px; margin-top: 30px; margin-left: 5%; margin-right: 5%; } @media (min-width: 768px) { .modal-dialog { width: auto; margin-left: 10%; margin-right: 10%; } .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } } @media (min-width: 992px) { .modal-dialog { width: auto; margin-left: 15%; margin-right: 15%; } }

我使用了mohammed Suleiman的回答（.dashboardScroll：{height：calc（100％+ 1px）;}）之后的最后一个方法，结果是我的内容下面有100％+ 1px的空白空间。 我通过在500ms后将高度更改回1px来解决这个问题。 丑，但它的作品。

这是一个react.js应用程序，所以我的代码是这样的： 

 componentDidUpdate() { if (window.navigator.standalone && /* test for iOS */) { var self = this; setTimeout(function(){ self.refs.style.innerHTML = "#content::after { height: 1px}"; }, 500); } }

并渲染： 

 render() { var style = ''; if (window.navigator.standalone && /* test for iOS */) { style = "#content::after { height: calc(100% + 1px)}"; } return (<div> <style type="text/css" ref="style"> {style} </style> <div id="content"></div> </div>); }
Interesting Posts