2018-06-14 10:39:30 around_primary 阅读数 7115

在解决iframe在ios无法滚动的bug中,需要在iframe外面包裹一层div,如下:

<div class="scroll-wrapper">
 <iframe src=""></iframe>
</div>

然后设置scroll-wrapper的样式,给scroll-wrapper添加-webkit-overflow-scrolling: touch;overflow-y: scroll

让外部的div进行滚动,然后保持iframe宽高100%。

.iframeDiv{
    -webkit-overflow-scrolling: touch;
    overflow: scroll;
    iframe{
      width: 100%;
      height: 100%;
    }
  }

2015-01-21 11:24:20 miaobinbin 阅读数 1102

- (void)webViewDidFinishLoad:(UIWebView *)webView{

    

//    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementById('s-topBanner').style.display=\"none\";document.getElementById('s-topBanner').parentNode.removeChild(document.getElementById('s-topBanner'))"];

    

}


2017-10-27 22:22:23 griffin23 阅读数 1801

当使用 overflow:scroll 属性来滑动div时,在iOS系统的手机上浏览时,则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。  

上网查找资料发现 可以在css中加上如下的语句来实现流畅的滑动。

 -webkit-overflow-scrolling: touch;

具体的原理是:这也可以开启了IOS系统的硬件加速功能,所以会提升用户体验。

2019-11-25 11:43:37 weixin_39735753 阅读数 26

最近项目首页改版增加一个动效,简单地说就是当滚动条滚动到一定位置,出现两个div。
安卓一切都正常,和预想的一样通过 window.addEventListener(‘scroll’, () => {});效果还算不错。但是到了ios发现,有很严重的延时,不流畅。一开始以为是有延时,后来发现并不是延时。
1,ios 监听滚动,为了减小开销,滚动结束才会触发事件,滚动过程中不会实时监听触发。
2,网上有说 用监听touchmove 替代 监听scroll,但是调试的时候发现touchmove的触发频率很低,视觉效果上还是会有一个延时。
3,后来找了些资料说是 用div内部的滚动(overflow:scroll)代替页面整体的滚动。这种方法的确可以在ios上解决上面的问题,但又引发了一个新的问题,就是ios的页面滑动会变的非常卡,没有惯性。然后又在网上找资料,找到了这个属性-webkit-overflow-scrolling。这个属性控制元素在移动设备上是否使用滚动回弹效果.当值设为touch,会有回弹效果,设为auto,手指离开滚动立刻结束。于是我在页面里设置了这个属性,果然有了效果。。。。。但是又引发了问题,一些fixed不起作用了等。
4,后来想到禁用滚动条,采用touch+transform来模拟滚动。最后是采用的better-scroll插件解决的这个问题,完美解决,下篇文章讲一下自己运用better-scroll遇到的一些问题。

2019-01-28 13:33:00 weixin_30491641 阅读数 47

height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;

转载于:https://www.cnblogs.com/shaozhu520/p/10329870.html

没有更多推荐了,返回首页