0

タブレット デバイスで jsbin を適切に動作させようとしています。

http://jsbin.com/eQOToDU/2

ページを下にスクロールすると、背景色が変わります。PC では、マウス スクロールまたは右側のサイド バーを使用します。しかし、タブレットではタッチスライド効果があります。この間、スクリプトは上記の jsbin で実行されません。これを回避する方法はありますか?

つまり、iPad などのタブレットでページをスクロールしている間 (上にフリックした後)、jQuery を実行することは可能ですか?

element.addEventListener('gesturechange', function() {});編集: from another stackを使用しようとしていますが、実際にはどこにも行きません

JS は次のようになります。

var colors = [
    [52, 152, 219], // blie
    [155, 89, 182], // purple
    [231, 76, 60], // red
    [230, 126, 34], // orange
    [241, 196, 15], // yellow
    [46, 204, 113] // green
    ];

var height = $(document).height();

$(document).scroll(function () {
    var steps = Math.floor(height / colors.length);
    var position = $(this).scrollTop();
    var currentStep = Math.floor(position / steps);
    if (currentStep === colors.length) currentStep = colors.length - 1;
    var rgb = $("body").css('background-color').replace('rgb(', '').replace(')', '').replace(/\s/g, '').split(',');
    var previousColor = colors[currentStep] || colors[0];
    var nextColor = colors[currentStep + 1] || colors[colors.length - 1];
    var percentFromThisStep = (position - (currentStep * steps)) / steps;
    if (percentFromThisStep > 1) percentFromThisStep = 1;

    var newRgb = [
    Math.floor(previousColor[0] + ((nextColor[0] - previousColor[0]) * percentFromThisStep)),
    Math.floor(previousColor[1] + ((nextColor[1] - previousColor[1]) * percentFromThisStep)),
    Math.floor(previousColor[2] + ((nextColor[2] - previousColor[2]) * percentFromThisStep))];

    $("body").css('background-color', 'rgb(' + newRgb.join(',') + ')');
});
4

0 に答える 0