-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