1

jQueryホバースクロールナビゲーションに取り組んでいます。scrollLeftandメソッドをandscrollTopと組み合わせて使用​​しています。Chrome/Safari を期待して、すべてが正常に機能しているようです。予期しない動作に気付きました。主に、スクロール イベントが 1 回だけトリガーされているようです。何が原因なのか、これを回避する方法があるのか​​ どうかはわかりません。.mouseover().mouseout()

とにかく、ここに私のコードとサイトへのリンクがあるので、自分で動作を確認できます。どんな助けでも素晴らしいでしょう。

URL: http://www.derekhutchinson.com

var delay = false;
function Movehorizonal(speed, ammount) {
    var curpos = $('body,html').scrollLeft();
    $("body,html").animate({
        scrollLeft: curpos + ammount
    }, speed);
    delay = setInterval(function() {
        //console.log("tick_horizontal");
        var curpos = $('body,html').scrollLeft();
        $("body,html").animate({
            scrollLeft: curpos + ammount
        }, speed);
    }, speed);
}

$(function() {

    var speed = 400;
    $('#goLeft').mouseover(function() {
        Movehorizonal(speed, -200);
    });
    $('#goLeft').mouseout(function() {
        $("body,html").stop();
        clearInterval(delay);
        delay = false;
    });
});​
4

2 に答える 2

1

Google Chrome と他のブラウザは両方とも異なる要素にスクロール値がある $('body').scrollLeft();ようです.. Webkit ブラウザでのみ動作するようですが、動作し$('html').scrollLeft();ません

だから、交換

var curpos = $('body,html').scrollLeft();

と

var curpos = Math.max($('body').scrollLeft(), $('html').scrollLeft());

と

var curpos = $('body,html').scrollTop();

と

var curpos = Math.max($('body').scrollTop(), $('html').scrollTop());

そして、それは期待どおりに機能します

J:

function Movehorizonal(speed, ammount) {
    var curpos = Math.max($('body').scrollLeft(), $('html').scrollLeft());
    $("body,html").animate({
        scrollLeft: curpos + ammount
    }, speed);
    delay = setInterval(function() {
        //console.log("tick_horizontal");
        var curpos = Math.max($('body').scrollLeft(), $('html').scrollLeft());
        $("body,html").animate({
            scrollLeft: curpos + ammount
        }, speed);
    }, speed);
}

function Movevertical(speed, ammount) {
    var curpos = Math.max($('body').scrollTop(), $('html').scrollTop());
    $("body,html").animate({
        scrollTop: curpos + ammount
    }, speed);
    delay = setInterval(function() {
        //console.log("tick_vertical");
        var curpos = Math.max($('body').scrollTop(), $('html').scrollTop());
        $("body,html").animate({
            scrollTop: curpos + ammount
        }, speed);
    }, speed);
}

ライブデモ| ソース

于 2012-12-24T15:59:17.440 に答える
0

イベントを mouseover/mouseout から mouseenter/mouseleave に変更してみてください。

また、「遅延」変数は、より広い範囲でどこかで宣言されていますか?

最後に、'amount' は 1 つの 'm' で綴られます。

于 2012-12-24T14:59:36.653 に答える