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

你的小提琴与这个问题无关（！）

Fiddle

制作div内容的两个按钮，向上和向下滚动

1 个答案:

Fiddle