html - 两个按钮制作一个 div 内容，上下滚动

Question

我有一个 90px 高度和overflow:hidden动态内容的 div。并排，我有两个按钮可以让滚动成为内容。

认为：

<div id="up">Up</div>
<div style="width:100px; height: 90px; overflow:hidden;display:block">
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla     bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla     bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
</div>
<div id="down">Down</div>

我正在使用的脚本（使用 MooTools）没有成功，是：

<script>
window.addEvent('domready', function() {
    var down = $('down');
    var up   = $('up');
    var div  = $('contentdiv');

    up.addEventListener("click", function(event) { 
        event = new Event(event).stop();
        var myFx = new Fx.Scroll(div).start(0, 0.5 );
    });

    down.addEventListener("click", function(event) { 
        event = new Event(event).stop();

        var myFx = new Fx.Scroll(div, {
            offset: {
                x: 0,
                y: 1
            }
        });
    });
});
</script>

为什么这不起作用？

一个完整的例子可以在http://jsfiddle.net/Rv5Mn/1/

Answer 1

试试这个，使用较新版本的 Mootools (1.3/1.4)：

window.addEvent('domready', function () {
    var down = $('down');
    var up = $('up');
    var div = $('contentdiv');

    up.addEvent("click", function (event) {
        event.stop();
        var myFx = new Fx.Scroll(div);
        myFx.start(0, div.getScroll().y - 80);
    });

    down.addEvent("click", function (event) {
        event.stop();
        var myFx = new Fx.Scroll(div);
        myFx.start(0, div.getScroll().y + 80);
    });
});

笔记：

• 在你的html中你没有$('contentdiv');，我的意思是你忘了给id="contentdiv"
• 如果你想使用 Mootools .stop();，你需要使用addEvent而不是addEventListener
• 你的小提琴与这个问题无关（！）

小提琴