0

我正在尝试让 jsbin 在平板电脑设备上正常工作。

http://jsbin.com/eQOToDU/2

当您向下滚动页面时，背景颜色会发生变化 - 在 PC 上，您可以使用鼠标滚动或右侧栏。但在平板电脑上，你有一个触摸幻灯片效果。在此期间，脚本不会在上面的 jsbin 中运行。有没有解决的办法？

也就是说，是否可以在页面在 iPad 等平板电脑上滚动时运行 jQuery（在您轻弹之后）？

编辑：我正在尝试element.addEventListener('gesturechange', function() {});从另一个堆栈中使用，但我并没有真正到达任何地方

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