ios下使用-webkit-overflow-scrolling出现卡顿无法滑动的bug解决

现在做的小程序项目需要适配iphoneX,所以不再使用page自身的滚动,需要在判断是iphoneX机型下把view底部留白34px;

34px是避开iphoneX底部的操作范围,以下代码同样适用H5

实现方法:最外层用content包裹滚动,默认情况下滑动时手指松开即停止滑动。为了实现顺滑滚动,加上这句代码:

-webkit-overflow-scrolling: auto | touch;

auto:自然滚动,手指松开就不再滚动

touch:手指松开之后,会惯性滚动一段距离

*但是伴随着会产生一个bug:在ios滚动几下后会出现无法滚动的现象

解决办法,首先 content 的position一定不能是fixed,而是要absolute;然后再设置 z-index:1来解决这个问题 

如果在滚动时候出现页面不渲染,可以试试:

-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);

下面贴出我的所有代码,可以做一下参考

.content,.iphonex-content{
  position:absolute;z-index:1;width:100%;top:0;bottom:0;
  -webkit-overflow-scrolling: touch;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0,0,0);
}
.iphonex-content,.iphonex-button{
  bottom:34px!important;
}
.iphonex-button{
  z-index:2
}

留白底部的效果,可加可不加

.iphonex-button:after{
  position: absolute;content:'';width:100%;height:34px;bottom:-34px;left:0;
  background: -webkit-linear-gradient(left, #FCF9F9 , #FFB3B3);
  background: -o-linear-gradient(right, #FCF9F9, #FFB3B3);
  background: -moz-linear-gradient(right, #FCF9F9, #FFB3B3);
  background: linear-gradient(to right, #FCF9F9 , #FFB3B3);
}



  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
### 回答1: -webkit-overflow-scrolling: touch; 是一个CSS属性,用于在移动设备上实现平滑的滚动效果。它可以应用于具有滚动内容的元素,例如 div 或 iframe。当用户在移动设备上滚动该元素时,它将以流畅的方式滚动,而不是像默认滚动一样卡顿。 ### 回答2: -webkit-overflow-scrolling:touch;是一个CSS属性,用于移动设备的浏览器中控制页面滚动的行为。当一个页面在移动设备上被访问时,其内容有可能会超过设备屏幕的大小,此时就需要滚动来查看页面内容。但是,在移动设备上的滚动效果相较于在桌面电脑上的体验要差很多,因为它们通常会有卡顿、慢反应或跳跃等不良效果。这样的效果会影响用户的体验,因此必须要采用一些方法来改善这种情况。 -webkit-overflow-scrolling:touch;可以帮助我们实现流畅的滚动效果,消除卡顿、慢反应和跳跃等问题。这个属性是仅适用于 Webkit 内核的,因此在移动设备上使用较为广泛。它会在页面滚动时使用硬件加速来优化滚动性能,从而实现更加平滑、自然的滚动。 这个属性使用起来非常简单,只需要将它添加到滚动区域的 CSS 样式中即可。例如: #scrollable { height: 150px; -webkit-overflow-scrolling: touch; overflow-y: auto; } 在这个例子中,页面中的一个元素被定义为滚动区域。当使用触摸设备滚动时,-webkit-overflow-scrolling:touch;会生效,从而确保滚动平滑自然。 总之,-webkit-overflow-scrolling:touch;是一个非常有用的属性,它可以提高移动设备上页面滚动的性能和用户体验。无论是开发移动网站还是移动应用,我们都应该考虑使用这个属性来改善用户体验。 ### 回答3: -webkit-overflow-scrolling: touch;是一个CSS属性,用于在屏幕上启用流畅的滚动功能。它主要应用于移动设备上的网页浏览器。通过启用此属性,用户可以在触摸屏上轻松地使用手指来滚动页面,而不会出现卡顿或延迟的情况。 该属性只能在Webkit浏览器中使用,以确保兼容性。它适用于大多数常见的移动设备和平板电脑,包括iPhone, iPad, Android手机和平板电脑等。 此属性的主要目的是优化网页在移动设备上的用户体验。由于移动设备的屏幕尺寸通常较小,因此需要在较小的屏幕上显示更多的内容。通过使用此属性,用户可以轻松地滚动网页并捕捉所需要的内容,而无需缩放视图或调整字号。 此外,-webkit-overflow-scrolling: touch;还可用于增强应用程序的用户体验。例如,在移动应用程序中,可以使用此属性使用户可以轻松地滚动列表或其他元素。 总之,-webkit-overflow-scrolling: touch;是一种对网页和应用程序的特殊效果,可以在移动设备上改善用户体验。它通过启用流畅的滚动功能,让用户可以轻松地浏览内容,缩小了移动设备和桌面网页之间的差距。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值