初识

老早之前,曾用过小四浏览一些Web应用,当初总想做一个scroll像原生的苹果webkit的那样的回弹效果(即手拖动网页,会看到灰色区域,并且放开之后,网页平滑回弹),那种浏览体验十分流畅。第一次看到有人实现这个效果,是用手机使用SmartQQ的时候,当时可能看着虽然有些许瑕疵,但是效果还是相当惊艳。直到我看到了豆瓣电影影评的手机Web版,发现他的内容滚动条在手机上滚动的效果几乎是Prefect的!

原理

实际上,在IOS升级到6之后(安卓应该是4.0之后吧),WebView内置提供了一个CSS私有属性-webkit-overflow-scrolling,这个玩意在设置值为touch,且对应元素的容器内是被允许滚动的,那么在手机端(IPhone)则会提供一个原生的UIScrollView去渲染内容,但是需要注意的是,虽然此刻滚动变得更加流畅,但是内存以及相应的CPU资源会骤然提升。

.myScrollWrap { -webkit-overflow-scrolling: touch; overflow: auto; }

在较新的的手机端,使用这个属性会得到非同凡响的惊艳效果,再也不会担心有人说前端做得东西太卡顿了。:>

兼容?!

说句题外话,作为一个当代的前端,不可能像几年前那样,为追求标准了不断地hack了,事实上旧的终归是旧的,想兼容新的特性肯定要付出无解的代价,前端新的特性如此之多,我对此的希望成为准则的是:渐进增强,优雅降级。当然,追求1px的完美的人太多太多,那也是企业的期望,做出完美的产品,也和UI/UE的经验成正比,这里就不多说了。
为了使不支持这个属性的终端(特别是电脑PC)永远与IPhone类似的效果,我们可以使用iScroll

<script src="js/iscroll.js"></script>
<script>
(function () {
    "use strict";

    if ("webkitOverflowScrolling" in document.body.style) {
        return; //该属性是否被浏览器所支持
    }

	//遍历所有需要支持回弹滚动条的DIV容器
    [].forEach.call(document.querySelectorAll(".cvbe-content"), function (v) {
        //竖向滚动,横向不滚动
        new iScroll(v, {hScrollbar: false, vScrollbar: true, hScroll: false});
    });
})();
</script>

以上仅仅只是一份DEMO代码,需要注意if判断该属性是否被浏览器所支持,如果支持,则不使用iScroll,琢磨一下,在你的代码中稍微改改,你是不是也会感觉到惊艳呢?