Question

所以我在这里有这个布局。

<div class="content">
    <div class="direction_left"></div>
    <div class="direction_right"></div>
    <div class="direction_up"></div>
    <div class="direction_down"></div>
</div>
<div id="game">
    <div id="pos"></div>
</div>

4个div，如果我悬停在它上面（应该）滚动顶部，如果我悬停在它的底部（应该）滚动机器人，左滚动左右滚动！

鼠标悬停在内容中的四个div中的任意一个上将相应地滚动页面。

重要 h_amount是水平的，v_amount是垂直的

function scroll_h() {
    console.log('scrolling left and right'+h_amount);
    $('#game').animate({
        scrollLeft: h_amount
    }, 100, 'linear',function() {
        if (h_amount != '') {
            scroll_h();
        }
    });
}
function scroll_v() {
    console.log('scrolling up and down'+v_amount);
    $('#game').animate({
        scrollTop: v_amount
    }, 100, 'linear',function() {
        if (v_amount != '') {
            scroll_v();
        }
    });
}

然后在悬停我致电

$('.direction_right').hover(function() {
    console.log('scroll right');
    h_amount = '+=50';
    scroll_h();
}, function() {
    h_amount = '';
});

$('.direction_up').hover(function() {
    console.log('scroll up');
    v_amount = '-=50';
    scroll_v();
}, function() {
    v_amount = '';
});

FULL fiddle here

问题，我无法理解为什么它不起作用。我认为我的剧本是正确的所以我想也许css这是我的一般弱点可能是错的：D帮助！

Answer 1

我想我找到了答案，如果我错了，请纠正我！

发现此问题here，询问为什么他的scrollTop()不会生成动画，答案显示该窗口没有scrollTop()属性，并且使用body或{ {1}}取而代之（取决于浏览器，因此请同时使用）。因此，我认为我的html div也没有#game属性！所以我将其替换为scrollTop()，现在正在使用：D。

*

P.S。不要真的知道它是否真正起作用，或者＃34;工作＆＃34;。

*

new fiddle here 也改变了那个渐变背景因为它让我晕了！

使用鼠标位置滚动网页 - 将鼠标悬停在侧面元素上

FULL fiddle here

1 个答案: