IOS 的彈性滾動解決方案
更新時間：2016年10月24日 11:41:34 作者：黎焱
所謂彈性滾動就是指在翻動長頁面手指離開時，由慢到塊，由快到慢的過度。這篇文章主要介紹了IOS 的彈性滾動解決方案,需要的朋友可以參考下
所謂彈性滾動就是指在翻動長頁面手指離開時，由慢到塊，由快到慢的過度。
安卓平臺上的大多數(shù)瀏覽器都默認(rèn)了該行為
ios當(dāng)前還只對<body>下的 overflow 默認(rèn)產(chǎn)生彈性滾動效果
前一陣子做了一個手機(jī)官網(wǎng)，用到了 <div> 中的 overflow，再調(diào)試 ios 中遇到了彈性滾動的問題：
ios 下 webkit 彈性滾動 css 指令 -webkit-overflow-scrolling: touch;
該指令再切換同樣需要做滾動處理的 div 是會遇到一下情況
1. 伴隨著上一個滾動而滾動
2. 起始定位偏差
3. 粘滯的阻塞感（失去焦點）
解決方案：
.session{
-webkit-overflow-scrolling: touch;
}
1. 切換標(biāo)簽的同時去掉元素的 overflow-scrolling 屬性
$('.session').removeClass('sollow');
2. 切換標(biāo)簽同時對目標(biāo) div 做初始化
document.getElementById('target').scrollTop = '0px'; // 根據(jù)需要添加
3. 將sollow重新加載到目標(biāo)元素上
$('.session:eq(' + tar + ')').addClass('display sollow');
以上所述是小編給大家介紹的IOS 的彈性滾動解決方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- IOS上iframe的滾動條失效的解決辦法
- iOS應(yīng)用開發(fā)中UIScrollView滾動視圖的基本用法總結(jié)
- iOS實現(xiàn)滾動字幕的動畫特效
- IOS中UITableView滾動到指定位置
- iOS ScrollView嵌套tableView聯(lián)動滾動的思路與最佳實踐
- iOS使用UICollectionView實現(xiàn)橫向滾動照片效果
- ios之UIScrollerView滾動視圖總結(jié)
- iOS Swift UICollectionView橫向分頁滾動，cell左右排版問題詳解
- 在IOS系統(tǒng)上滾動條滾動到指定的位置出現(xiàn)空白頁面的解決方案
- iOS實現(xiàn)循環(huán)滾動公告欄
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了iOS開發(fā)實現(xiàn)簡單計算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
iOS開發(fā)中UITabBarController的使用示例
這篇文章主要介紹了iOS開發(fā)中UITabBarController的使用示例,代碼基于Objective-C進(jìn)行演示,需要的朋友可以參考下2015-09-09
這篇文章主要給大家介紹了關(guān)于iOS多Target環(huán)境配置的完整步驟，文中通過示例代碼介紹的非常詳細(xì)，對各位iOS開發(fā)者們具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
你應(yīng)該知道的tableViewCell行高計算處理
這篇文章主要給大家介紹了關(guān)于tableViewCell行高計算的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了iOS實現(xiàn)文件下載功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
對于直播來說，客戶端主要做兩件事情，推流和播放。本篇主要對播放進(jìn)行詳細(xì)介紹，需要的朋友一起來看下吧2016-12-12
iOS開發(fā)中Quartz2D繪圖路徑的使用以及條紋效果的實現(xiàn)
這篇文章主要介紹了iOS開發(fā)中Quartz2D繪圖路徑的使用以及條紋效果的實現(xiàn),代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了IOS實現(xiàn)自定義布局瀑布流，畫面感非常炫麗，想要學(xué)習(xí)的朋友不要錯過本文2016-01-01
關(guān)于iOS推送的那些事，你知道多少？本文帶著大家一起了解iOS推送，感興趣的小伙伴們可以參考一下2016-02-02
iOS實現(xiàn)微信/QQ顯示最近拍攝圖片的功能實例代碼
如果你剛剛拍攝了圖片，在使用微信/QQ發(fā)生消息時會顯示“你可能要發(fā)送的圖片”，這個功能非常人性化，怎么實現(xiàn)的呢？下面小編給大家分享iOS實現(xiàn)微信/QQ顯示最近拍攝圖片的功能實例代碼，一起看看吧2017-03-03