1

我正在开发一个 jQuery 悬停滚动导航。我将scrollLeftandscrollTop方法与.mouseover()and结合使用.mouseout()。在 Chrome/Safari 中，一切似乎都运行良好。我注意到意外的行为。主要是滚动事件似乎只触发一次。我不确定是什么原因造成的，或者是否有办法解决这个问题。

无论如何，这是我的代码和网站链接，因此您可以自己查看行为。任何帮助都会很棒。

网址： 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());

它按预期工作

JS：

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”用一个“m”拼写。

于 2012-12-24T14:59:36.653 回答