移动端页面在IOS里滑动不顺畅解决办法

越陌度阡

发布于 2020-11-26 08:27:50

2.3K0

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

开发移动端的同学可能都知道，当在你用overflow-y:scorll属性的时候，内容超出容器溢出滚动的效果很迟顿，特别是在IOS系统里，通常情况下，我们为了追求好的用户体验，会使用屏幕滚动插件better-scroll了，这个插件是真心好用，但是有些情况下我们可能并不想那么麻烦，而且页面的体验要求也没有那么高，下面给大家介绍一个简单偷懒的办法．

这时候可以使用-webkit-overflow-scrolling:touch这个属性，让滚动条产生滚动回弹的效果，就像ios原生的滚动条一样流畅

简单说明一下：

-webkit-overflow-scrolling ：控制元素在移动设备上是否使用滚动回弹效果。 auto：使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。 touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。

需要注意的事项：

通过动态添加内容撑开容器，结果根本不能滑动。在safari上，点击其他区域，再在滚动区域滑动，滚动条无法滚动。　在safari上，使用了-webkit-overflow-scrolling:touch之后，页面偶尔会卡住不动。

解决问题的方法：

第一步：将使用-webkit-overflow-scrolling的元素的定位取消或手动改成position:static; 第二步：将使用-webkit-overflow-scrolling的元素添加一个子元素，设置子元素的高度为height:101%，或者为了精确一些写成height:calc(100vh + 1px),注意这个加号前后都要有空格．

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/03/14 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html

容器

ios

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

1 条评论

热度

最新

用户1088365

2021-10-09

RPA是通过软件机器人模拟人的操作，可以说电脑上所有重复性比较高，有明确流程的事情都可以通过RPA辅助人工实现，比如像网络推广这样的事情，用人工操作的大致流程一般就是注册、登陆各大媒体平台=》发布文章=》搜索关键词=》针对有需求的用户提问回复内容=》监控留言=》发送站内信或者回帖=》收集潜在用户邮箱=》发送邮件，规则比较死，日复一日无休无尽，而且员工成本比较高还容易懈怠，如果用机器辅助实现就可以24小时运行，从不偷懒，不犯错，响应及时，这样将人力解放出来去做编写文章这种更有创造力的事情，可以一举两得，派子RPA就是这样解决了客户的痛点，可谓是互利互惠合作共赢。

回复回复点赞举报