iOS 页面滚动事件回调函数示例

iOS scroll event callback function

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1532
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var app = app || {};

app = (function() {
    'use strict';

var iosScrollCallback = function() {

var counter = 0,
            outputEl = document.getElementById('output');

var tick = function() {
            outputEl.textContent = counter++;
        }

// RequestAnimationFrame polyfill.
        var _requestAnimFrame = (function() {

return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||

function(callback) {
                    window.setTimeout(callback, 1000 / 60)
                }
        }());

var handler = function(e) {
            _requestAnimFrame(function() {
                tick();
            });
        }

window.addEventListener('scroll', handler);

};

return {
        iosScrollCallback: iosScrollCallback
    };

}());

window.onload = function() {
    'use strict';

// initialise modules
    app.iosScrollCallback();

};

编译

CSS

HTML

<h1>iOS scroll event callback function</h1>
    <p>This is a test to fire a callback function whenever a scroll event occurs on an iOS device.</p>
    <p>It uses requestAnimationFrame to generate the callbacks.</p>
    <p>Works in iOS Safari, no such luck in iOS Chrome.</p>
    <p>Only tested on an iPhone 5 iOS8.1</p>

<section>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </section>
    <section>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </section>
    <section>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </section>
    <section>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </section>
    <section>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </section>
    <section>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </section>

</div>

<footer>
    <a href="https://www.allofmyfriendsareontheinternet.com">&laquo; All of my friends are on the Internet</a>
</footer>

iOS scroll event callback function

编辑器支持Emmet

快捷键

iOS scroll event callback function

如何使用three.js Phenomenon插件来创建基于webgl的页面滚动平滑过渡特效

webgl2导数函数（texture derivative）代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：