网页在Safari快速滚动和回弹的原理: -webkit-overflow-scrolling : touch;的实现

现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼。

要实现这个效果很简单,只需要加一行css代码即可:

-webkit-overflow-scrolling : touch;
可用以下网页测试:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta charset="utf-8" />
        <title>scroll</title>
        <style type="text/css">
            .container {
                width : 300px;
                height : 50%;
                -webkit-box-sizing : border-box;
                position : relative;
                overflow-y : auto;
                background-color : cyan;
                -webkit-overflow-scrolling : touch;  /* liuhx:可以把这整行注释掉对比差别 */
            }
            ul {
                height: 50px;
            }
        </style>
    </head>
<body>
    <div align="center">
        <nav class="container">
            <ul>1</ul>
            <ul>2</ul>
            <ul>3</ul>
            <ul>4</ul>
            <ul>5</ul>
            <ul>6</ul>
            <ul>7</ul>
            <ul>8</ul>
            <ul>9</ul>
            <ul>10</ul>
            <ul>11</ul>
            <ul>12</ul>
            <ul>13</ul>
            <ul>14</ul>
            <ul>15</ul>
            <ul>16</ul>
            <ul>17</ul>
            <ul>18</ul>
            <ul>19</ul>
            <ul>20</ul>
        </nav>
    </div>
</body>
</html>
可以用手指滑动中间的蓝色区域,会发现回弹效果以及滚动得很快:


(点击图片查看大图)
如果把-webkit-overflow-scrolling那行注释掉,就会发现滚动得很慢。


实际上,Safari真的用了原生控件来实现,对于有-webkit-overflow-scrolling的网页,会创建一个UIScrollView,提供子layer给渲染模块使用。创建时的堆栈如下:

Thread 1, Queue : com.apple.main-thread
#0	0x00086723 in -[UIScrollView initWithFrame:] ()
#1	0x004ec3bd in -[UIWebOverflowScrollView initWithLayer:node:webDocumentView:] ()
#2	0x001f1769 in -[UIWebDocumentView webView:didCreateOrUpdateScrollingLayer:withContentsLayer:scrollSize:forNode:allowHorizontalScrollbar:allowVerticalScrollbar:] ()
#3	0x01d571bd in __invoking___ ()
#4	0x01d570d6 in -[NSInvocation invoke] ()
#5	0x01d5724a in -[NSInvocation invokeWithTarget:] ()
#6	0x027fb6a1 in -[_WebSafeForwarder forwardInvocation:] ()
#7	0x027fb8ab in __44-[_WebSafeAsyncForwarder forwardInvocation:]_block_invoke_0 ()
#8	0x04ac753f in _dispatch_call_block_and_release ()
#9	0x04ad9014 in _dispatch_client_callout ()
#10	0x04ac97d5 in _dispatch_main_queue_callback_4CF ()
#11	0x01d09af5 in __CFRunLoopRun ()
#12	0x01d08f44 in CFRunLoopRunSpecific ()
#13	0x01d08e1b in CFRunLoopRunInMode ()
#14	0x01cbd7e3 in GSEventRunModal ()
#15	0x01cbd668 in GSEventRun ()
#16	0x00032ffc in UIApplicationMain ()
#17	0x00002ae2 in main at /Users/liuhx/Desktop/UIWebView_Research/WebViewResearch/main.mm:16
实际创建的是UIWebOverflowScrollView,它继承自UIScrollView,声明为:

@class DOMNode, UIWebDocumentView, UIWebOverflowContentView, UIWebOverflowScrollListener;

@interface UIWebOverflowScrollView : UIScrollView
{
    UIWebDocumentView *_webDocumentView;
    UIWebOverflowScrollListener *_scrollListener;
    UIWebOverflowContentView *_overflowContentView;
    DOMNode *_node;
    BOOL _beingRemoved;
}

@property(nonatomic, getter=isBeingRemoved) BOOL beingRemoved; // @synthesize beingRemoved=_beingRemoved;
@property(retain, nonatomic) DOMNode *node; // @synthesize node=_node;
@property(retain, nonatomic) UIWebOverflowContentView *overflowContentView; // @synthesize overflowContentView=_overflowContentView;
@property(retain, nonatomic) UIWebOverflowScrollListener *scrollListener; // @synthesize scrollListener=_scrollListener;
@property(nonatomic) UIWebDocumentView *webDocumentView; // @synthesize webDocumentView=_webDocumentView;
- (void)setContentOffset:(struct CGPoint)arg1;
- (void)_replaceLayer:(id)arg1;
- (void)prepareForRemoval;
- (void)fixUpViewAfterInsertion;
- (id)superview;
- (void)dealloc;
- (id)initWithLayer:(id)arg1 node:(id)arg2 webDocumentView:(id)arg3;

@end
其还有一个子View作为ContentView,是给WebCore真正用作渲染overflow型内容的layer的容器。

UIWebOverflowContentView的声明为:

@interface UIWebOverflowContentView : UIView
{
}

- (void)_setCachedSubviews:(id)arg1;
- (void)_replaceLayer:(id)arg1;
- (void)fixUpViewAfterInsertion;
- (id)superview;
- (id)initWithLayer:(id)arg1;

@end
再往底层跟,都是CALayer的操作。


以上两个类都是UIKit层的实现,需要WebCore有硬件加速的支持才有实际意义,相关的逻辑被包含在

ACCELERATED_COMPOSITING

这个宏里。

从SVN log看,在WebKit 108400版本左右才支持,所以iOS Safari应该是需要5.0。Android只在4.0以上支持。


从前端开发的角度讲,只需要知道CSS的属性-webkit-overflow-scrolling是真的创建了带有硬件加速的系统级控件,所以效率很高。但是这相对是耗更多内存的,最好在产生了非常大面积的overflow时才应用。


转载请注明出处:http://blog.csdn.net/hursing

  • 15
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
### 回答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;是一种对网页和应用程序的特殊效果,可以在移动设备上改善用户体验。它通过启用流畅的滚动功能,让用户可以轻松地浏览内容,缩小了移动设备和桌面网页之间的差距。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hursing

来一个五羊香芋甜筒~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值