iphone 在设置了initial-scale=1 之后,在设置滚动条之后,没有滑动效果的解决办法...

本文介绍了如何在iPhone的Safari浏览器中通过设置-webkit-overflow-scrolling:touch来实现平滑滚动效果,无需依赖第三方库如iscroll。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

iphone在设置了initial-scale=1 之后,我们终于可以以1:1 的比例进行页面设计了。

关于viewport,还有一个很重要的概念是:iphone 的safari 浏览器完全没有滚动条,而且不是简单的“隐藏滚动条”,是根本没有这个功能。

iphone 的safari 浏览器实际上从一开始就完整显示了这个网页,然后用viewport 查看其中的一部分。

当你用手指拖动时,其实拖的不是页面,而是viewport。浏览器行为的改变不止是滚动条,交互事件也跟普通桌面不一样。

解决办法:

用iphone或ipad浏览很长的网页滚动时的滑动效果很不错吧?不过如果是一个div,然后设置height:200px;overflow:auto;的话,可以滚动但是完全没有那滑动效果,很郁闷吧?

我看到很多网站为了实现这一效果,用了第三方类库,最常用的是iscroll(包括新浪手机页,百度等)我一开始也使用,不过自从用了-webkit-overflow-scrolling: touch;样式后,就完全可以抛弃第三方类库了,

把它加在body{}区域,所有的overflow需要滚动的都可以生效了。

转载于:https://www.cnblogs.com/xiaofenguo/p/6068357.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值