1

高さ 90px のoverflow:hidden動的コンテンツを持つ div があります。並べて、スクロールをコンテンツにするための2つのボタンがあります。

仮定する：

<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/にあります。

4

1 に答える 1

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();使用する必要がありますaddEventaddEventListener
  • あなたのフィドルはこの質問とは関係ありません (!)

フィドル

于 2013-11-04T21:54:20.703 に答える