Почему мой Javascript / jQuery работает в Chrome и Safari, но не в Firefox, IE9 или Opera? - PullRequest
Новая
       31

Почему мой Javascript / jQuery работает в Chrome и Safari, но не в Firefox, IE9 или Opera?

4 голосов
/ 07 октября 2011

http://jsfiddle.net/nicktheandroid/tfZns/4/

Вы захватываете страницу и подбрасываете ее вверх или вниз, вроде андроида или iphone. Он работает в Chrome и Safari (webkit), но не работает в Firefox, т.е. 9 или Opera.

Мне помогли некоторые сценарии, и я действительно не уверен, что плохого в том, что они не работают в этих браузерах. Я думал, что что-то в Javascript / Jquery будет работать одинаково практически во всех браузерах, думаю, я ошибся.

В браузерах Webkit вы можете mousedown на странице, затем пролистать вверх или вниз и отпустить кнопку мыши, и страница будет прокручиваться / перемещаться, как, например, вы щелкаете пальцем по телефону с сенсорным экраном и прокручиваете страницу браузера вверх. или вниз. В Firefox, IE9 и Opera при попытке mousedown, а затем при перетаскивании / перетаскивании подсвечиваются только цифры на странице, страница не прокручивается так, как должно.

Javascript: 

var gesturesX = 0;
var gesturesY = 0;

var startPosition = 0;
var velocity = 0;
var isMouseDown = false;
var startScrollTop = 0;

var timer;

function GetVelocity() {
    velocity = startPosition - gesturesY;
}

$(document).mousemove(function(e) {
    gesturesX = parseInt(e.pageX, 10);
    gesturesY = parseInt(e.pageY, 10);
    $("#mouse").html(gesturesY);
    if (isMouseDown) {
        var scrollToPosition = startScrollTop + (startPosition - gesturesY);
        $("body").scrollTop(scrollToPosition);
        return false;
    }
});

$(document).mousedown(function() {
    if ($("body").is(':animated')) {
        $("body").stop(true, false).trigger('mouseup');
    }
    startPosition = gesturesY;
    startScrollTop = $("body").scrollTop();
    isMouseDown = true;
    timer = window.setTimeout(GetVelocity, 50);
    $(document).everyTime(50, function(i) {
        velocity = startPosition - gesturesY;
    });
});

$(document).mouseup(function() {
    isMouseDown = false;
    if (velocity !== 0) {
        $Body = $("body");
        var distance = velocity * 10;
        var scrollToPosition = $Body.scrollTop() + distance;
        $Body.eq(0).stop().animate({
            scrollTop: scrollToPosition
        }, 1000);
        velocity = 0;
    }
    return false;
});

// create a ton of numbers to make the page long - below
$("#test p").each(function(index) {
    $(this).prepend('<span class="commentnumber">' + index + 1 + '</span>');
});

Ответы [ 2 ]

2 голосов
/ 07 октября 2011

Я думаю, вы должны использовать селектор $('html, body')

2 голосов
/ 07 октября 2011

Измените "body" на "html", и это будет работать. Протестировано на новейших Firefox и Opera, вам нужно проверить, работает ли оно на старых версиях. 

$("html").scrollTop(scrollToPosition);

Вы также можете рассмотреть отключение выделения текста , потому что это выглядит немного забавно, когда вы прокручиваете страницу.

...