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

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或 html 代替(取决于浏览器，因此请同时使用两者)。 因此我认为我的 #game div 也没有 scrollTop() 属性!所以我用 html,body 替换了它，它现在可以工作了 :D。

*

附言真的不知道它是否实际工作或“工作”。

*

new fiddle here 还改变了那个渐变背景，因为它让我头晕!