タブレット デバイスで jsbin を適切に動作させようとしています。
ページを下にスクロールすると、背景色が変わります。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(',') + ')');
});