2. 程式人生 > >webView 之 webapp在ios中簡單實現滑動，回彈，加速等效果

webView 之 webapp在ios中簡單實現滑動，回彈，加速等效果

阿新 • • 發佈：2019-01-20

webkit-overflow-scrolling來自safari原生控制元件的實現，工作原理是：在有這個屬性的容器上，系統會建立了一個uiscrollview，應用於該元素並將之作為渲染物件，從而為我們實現體驗流暢的觸屏滑動

在Ios上的表現結果令人十分滿意，並且網頁滑動和區域滑動的衝突同樣解決的很好

要實現這個效果很簡單，只需要加一行css程式碼即可：

  1. -webkit-overflow-scrolling : touch;  
可用以下網頁測試：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.     <head>
  4.         <metacharset="utf-8"/>
  5.         <title>scroll</title>
  6.         <styletype="text/css">
  7.             .container {  
  8.                 width : 300px;  
  9.                 height : 50%;  
  10.                 -webkit-box-sizing : border-box;  
  11.                 position : relative;  
  12.                 overflow-y : auto;  
  13.                 background-color : cyan;  
  14.                 -webkit-overflow-scrolling : touch;  /* liuhx:可以把這整行註釋掉對比差別 */  
  15.             }  
  16.             ul {  
  17.                 height: 50px;  
  18.             }  
  19.         </style>
  20.     </head>
  21. <body>
  22.     <
    divalign="center">
  23.         <navclass="container">
  24.             <ul>1</ul>
  25.             <ul>2</ul>
  26.             <ul>3</ul>
  27.             <ul>4</ul>
  28.             <ul>5</ul>
  29.             <ul>6</ul>
  30.             <ul>7</ul>
  31.             <ul>8</ul>
  32.             <ul>9</ul>
  33.             <ul>10</ul>
  34.             <ul>11</ul>
  35.             <ul>12</ul>
  36.             <ul>13</ul>
  37.             <ul>14</ul>
  38.             <ul>15</ul>
  39.             <ul>16</ul>
  40.             <ul>17</ul>
  41.             <ul>18</ul>
  42.             <ul>19</ul>
  43.             <ul>20</ul>
  44.         </nav>
  45.     </div>
  46. </body>
  47. </html>

實際上，Safari真的用了原生控制元件來實現，對於有-webkit-overflow-scrolling的網頁，會建立一個UIScrollView，提供子layer給渲染模組使用。建立時的堆疊如下：

  1. Thread 1, Queue : com.apple.main-thread  
  2. #0  0x00086723 in -[UIScrollView initWithFrame:] ()  
  3. #1  0x004ec3bd in -[UIWebOverflowScrollView initWithLayer:node:webDocumentView:] ()  
  4. #2  0x001f1769 in -[UIWebDocumentView webView:didCreateOrUpdateScrollingLayer:withContentsLayer:scrollSize:forNode:allowHorizontalScrollbar:allowVerticalScrollbar:] ()  
  5. #3  0x01d571bd in __invoking___ ()  
  6. #4  0x01d570d6 in -[NSInvocation invoke] ()  
  7. #5  0x01d5724a in -[NSInvocation invokeWithTarget:] ()  
  8. #6  0x027fb6a1 in -[_WebSafeForwarder forwardInvocation:] ()  
  9. #7  0x027fb8ab in __44-[_WebSafeAsyncForwarder forwardInvocation:]_block_invoke_0 ()  
  10. #8  0x04ac753f in _dispatch_call_block_and_release ()  
  11. #9  0x04ad9014 in _dispatch_client_callout ()  
  12. #10 0x04ac97d5 in _dispatch_main_queue_callback_4CF ()  
  13. #11 0x01d09af5 in __CFRunLoopRun ()  
  14. #12 0x01d08f44 in CFRunLoopRunSpecific ()  
  15. #13 0x01d08e1b in CFRunLoopRunInMode ()  
  16. #14 0x01cbd7e3 in GSEventRunModal ()  
  17. #15 0x01cbd668 in GSEventRun ()  
  18. #16 0x00032ffc in UIApplicationMain ()  
  19. #17 0x00002ae2 in main at /Users/liuhx/Desktop/UIWebView_Research/WebViewResearch/main.mm:16  
實際建立的是UIWebOverflowScrollView，它繼承自UIScrollView，宣告為：
  1. @class DOMNode, UIWebDocumentView, UIWebOverflowContentView, UIWebOverflowScrollListener;  
  2. @interface UIWebOverflowScrollView : UIScrollView  
  3. {  
  4.     UIWebDocumentView *_webDocumentView;  
  5.     UIWebOverflowScrollListener *_scrollListener;  
  6.     UIWebOverflowContentView *_overflowContentView;  
  7.     DOMNode *_node;  
  8.     BOOL _beingRemoved;  
  9. }  
  10. @property(nonatomic, getter=isBeingRemoved) BOOL beingRemoved; // @synthesize beingRemoved=_beingRemoved;
  11. @property(retain, nonatomic) DOMNode *node; // @synthesize node=_node;
  12. @property(retain, nonatomic) UIWebOverflowContentView *overflowContentView; // @synthesize overflowContentView=_overflowContentView;
  13. @property(retain, nonatomic) UIWebOverflowScrollListener *scrollListener; // @synthesize scrollListener=_scrollListener;
  14. @property(nonatomic) UIWebDocumentView *webDocumentView; // @synthesize webDocumentView=_webDocumentView;
  15. - (void)setContentOffset:(struct CGPoint)arg1;  
  16. - (void)_replaceLayer:(id)arg1;  
  17. - (void)prepareForRemoval;  
  18. - (void)fixUpViewAfterInsertion;  
  19. - (id)superview;  
  20. - (void)dealloc;  
  21. - (id)initWithLayer:(id)arg1 node:(id)arg2 webDocumentView:(id)arg3;  
  22. @end  
其還有一個子View作為ContentView，是給WebCore真正用作渲染overflow型內容的layer的容器。

UIWebOverflowContentView的宣告為：

  1. @interface UIWebOverflowContentView : UIView  
  2. {  
  3. }  
  4. - (void)_setCachedSubviews:(id)arg1;  
  5. - (void)_replaceLayer:(id)arg1;  
  6. - (void)fixUpViewAfterInsertion;  
  7. - (id)superview;  
  8. - (id)initWithLayer:(id)arg1;  
  9. @end  
再往底層跟，都是CALayer的操作。

以上兩個類都是UIKit層的實現，需要WebCore有硬體加速的支援才有實際意義，相關的邏輯被包含在

ACCELERATED_COMPOSITING

這個巨集裡。

從SVN log看，在WebKit 108400版本左右才支援，所以iOS Safari應該是需要5.0。Android只在4.0以上支援。

從前端開發的角度講，只需要知道CSS的屬性-webkit-overflow-scrolling是真的建立了帶有硬體加速的系統級控制元件，所以效率很高。但是這相對是耗更多記憶體的，最好在產生了非常大面積的overflow時才應用。

相關推薦

webView 之 webapp在ios中簡單實現滑動，回彈，加速等效果

webkit-overflow-scrolling來自safari原生控制元件的實現，工作原理是：在有這個屬性的容器上，系統會建立了一個uiscrollview，應用於該元素並將之作為渲染物件，從而為我們實現體驗流暢的觸屏滑動 在Ios上的表現結果令人十分滿意，並且網頁

webapp在ios中簡單實現滑動，回彈，加速等效果

-webkit-overflow-scrolling來自safari原生控制元件的實現，工作原理是：在有這個屬性的容器上，系統會建立了一個uiscrollview，應用於該元素並將之作為渲染物件，從而為我們實現體驗流暢的觸屏滑動 在Ios上的表現結果令人十分滿意，並且網

Socket程式設計之TCP的簡單實現

Client import java.io.*; import java.net.Inet4Address; import java.net.InetSocketAddress; import java.net.Socket; public class Client { pub

Android中簡單實現DrawerLayout

<android.support.v4.widget.DrawerLayout xmlns:android=“http://schemas.android.com/apk/res/android” xmlns:app=“http://schemas.android.com/apk/re

pathon爬蟲中簡單的請求頭fake_useragent庫，處理反爬問題

安裝 pip3 install fake_useragent 各瀏覽器User-Agent的值 from fake_useragent import UserAgent ua = UserAgent() # ie瀏覽器的user agent print(ua.ie) Mozill

設計模式之代理模式簡單實現

簡介 代理模式通常用於達到對原有系統功能進行擴充的目的，比如：你剛接手一個別人沒有完成的專案，這時你不想動別人原來的程式碼，還需要新增新功能。這時代理模式，這時代理模式會很好的幫我們解決問題 代理模式一般分為靜態代理，動態代理兩種 靜態代理 靜態代理一般是

入門 之 js中axios實現與後臺互動入口

格式略 寫不進去 !!! <script src="js/axios.min.js"></script> <script> window.onload = function(){ // 1.第一種 axios

TensorFlow之神經網路簡單實現MNIST資料集分類

import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data mnist=input_data.read_data_sets("MNIST_data",one_hot=True) ba

C# TreeView 拖拽節點到另一個容器Panel中簡單實現

C# TreeView 拖拽節點到另一個容器Panel中簡單實現 用了這麼久C#拖拽功能一直沒有用到也就沒用過，今天因為專案需要，領導特地給我簡單講解了下拖拽功能，真是的大師講解一點通啊。特地寫一篇部落格記錄下，分享給大家！也方便以後自己檢視。 1.拖拽功能分析 拖拽功能分析其實就三個字：選-->

SSM整合系列之 整合Quartz簡單實現任務排程

1.摘要：Quartz是Java領域的開源任務排程工具，是一個任務排程框架，通過觸發器設定作業的定時執行規則，來執行定時任務。在專案中使用頻繁，本文將在SSM整合專案上整合Quartz框架實現任務排程。 基礎專案的搭建參考文章：https://blog.csdn.net/caiqing1

vue簡單實現滑動到底部載入更多

思路: 如果可視區的高度域dom元素的getBoundingClientRect().bottom高度相同說明已經到了底部,可以實現載入了 template: <template> <div class="content"> <d

帶滑動條的導航欄(中)---jQuery實現滑動效果

前言    本節利用jQuery實現最終的滑動效果。文件示例程式碼下面有下載連結。 網頁程式碼   navigator2.html <!DOCTYPE html> <html> <head> <meta charset="u

ASP.NET中怎樣實現圖片驗證碼功能，並且點選圖片會重新整理

------ 基本思路： 圖片的src=後臺的一個函式，此函式返回按照一定規則生成的圖片檔案流。 然後此圖片即可生成。 那麼怎樣重新整理驗證碼呢，這是個問題。 因為給圖片的src賦了值之後，想要更換一個圖片，那麼src的那個函式必須再執行一次才行。 <img src=

安卓介面之Viewpager和Tablayout實現滑動介面

摘要:六部實現選項卡介面   一. 在gradle檔案新增以下程式碼: implementation 'com.android.support:design:28.0.0'  在gradle檔案新增以上程式碼後,才能使用Tablayout(版本號28.0.0是我做實驗時

安卓界面之Viewpager和Tablayout實現滑動界面

多個 ces listt man bind tle find you 安卓 摘要:六部實現選項卡界面 一. 在gradle文件添加以下代碼: implementation ‘com.android.support:design:28.0.0‘ 在gradle文件添

hive中簡單介紹分割槽表(partition table)，含動態分割槽(dynamic partition)與靜態分割槽(static partition)

hive> insert overwrite table partition_test partition(stat_date='20110527',province='liaoning') select member_id,name from partition_test_input; WARNING

微信中如何實現APP分享連結判斷，實現在預設瀏覽器開啟

要做app的分享到微信的頁面，如果手機已經安裝了這個APP就顯示“開啟應用”按鈕，如果手機沒有安裝app就顯示“下載應用”按鈕。但是 如果使用者是在微信環境中打開了這個連結是無法進行下載和喚醒APP的，所以要價格判斷 如果使用者在微信打開了，需要跳到瀏覽器開啟下載連結或者喚醒APP！ 現在可以實現安卓手機的

Java Web中簡單實現自動登陸功能。

Java 對自動登陸功能的簡單實現，僅用到了servlet和一個filter。第一次寫博文，如有不足的地方，敬請指正，謝謝。 登陸介面 <%@ page language="java" import="java.util.*" pageEncoding="UTF

JavaWeb之Servlet的簡單實現

上篇文章學習了Servlet的概念、技術功能、技術特點、生命週期和工作過程。如果對Servlet不瞭解的可以去檢視JavaWeb學習之Servlet。瞭解了Servlet是什麼之後，就開始程式碼實踐，

安卓開發之使用ViewDragHelper簡單實現Activity左滑返回

一、ViewDragHelper 在另一篇部落格裡介紹了ViewDragHelper，這裡就不再介紹了。 二、Activity左滑返回的簡單實現 基本思路是使用ViewDragHelper自定義一個ViewGroup（命名為Swipe