3

スクロールバー付きの #scrollable div があり、最後までスクロールしたい。div の "scrollTop" プロパティを div の "scrollHeight" プロパティの値に設定することで、次のように実行できます。

var scrollable = d3.select("#scrollable");
scrollable.property("scrollTop", scrollable.property("scrollHeight"));

しかし、どうすればそれをトゥイーンできるのかわかりません。

var scrollheight = scrollable.property("scrollHeight");
d3.select("#scrollable").transition().property("scrollTop", scrollheight);

動作しません。

アイデアをありがとう。よろしく

4

1 に答える 1

8

カスタムd3 トゥイーンを使用して、のような任意のプロパティを遷移できますscrollTop。

mbostock のスムーズ スクロールの例では、カスタム トゥイーンを使用してドキュメント全体をスクロールする方法を示しています。

そして、ここにあなたの文脈に合わせた例があります ( bl.ocks.org でインタラクティブに見ることもできます):

var scrollable = d3.select("#scrollable"); 

d3.select("#down").on('click', function() { 
    var scrollheight = scrollable.property("scrollHeight"); 
    d3.select("#scrollable").transition().duration(3000) 
        .tween("uniquetweenname", scrollTopTween(scrollheight)); 
}); 

function scrollTopTween(scrollTop) { 
    return function() { 
        var i = d3.interpolateNumber(this.scrollTop, scrollTop); 
        return function(t) { this.scrollTop = i(t); }; 
    }; 
}
于 2013-05-03T07:35:52.737 に答える