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

【问题标题】：Scrolling on webpage with mouse location - hover on side elements使用鼠标位置在网页上滚动 - 悬停在侧面元素上
【发布时间】：2014-08-21 19:38:53
【问题描述】：

所以我这里有这个布局。

<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 帮助！

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

发现这个问题here问为什么他的scrollTop()不会动画，答案说窗口没有scrollTop()属性，而是使用body或html代替（取决于浏览器，所以两者都用）。因此我认为我的#game div 也没有scrollTop() 属性！所以我用html,body 替换了它，它现在可以工作了：D。

附：真的不知道它是真正工作还是“工作”。

new fiddle here 还改变了渐变背景，因为它让我头晕目眩！

【讨论】：