javascript - ボタンとマウスを使用して DIV をスクロールする

Question

オーバーフロー スクロールのある DIV があります。そして、そのdivを上下にスクロールする2つのボタンを追加したいと思います。方法を見つけるか、マウスでスクロールすることしかできません。または、オーバーフローを非表示に設定する必要があるため、ボタンでスクロールします。

両方を行う方法はありますか？

Answer 1

これを試して：

var step = 25;
var scrolling = false;

// Wire up events for the 'scrollUp' link:
$("#scrollUp").bind("click", function (event) {
    event.preventDefault();
    // Animates the scrollTop property by the specified
    // step.
    $("#content").animate({
        scrollTop: "-=" + step + "px"
    });
}).bind("mouseover", function (event) {
    scrolling = true;
    scrollContent("up");
}).bind("mouseout", function (event) {
    scrolling = false;
});


$("#scrollDown").bind("click", function (event) {
    event.preventDefault();
    $("#content").animate({
        scrollTop: "+=" + step + "px"
    });
}).bind("mouseover", function (event) {
    scrolling = true;
    scrollContent("down");
}).bind("mouseout", function (event) {
    scrolling = false;
});

function scrollContent(direction) {
    var amount = (direction === "up" ? "-=1px" : "+=1px");
    $("#content").animate({
        scrollTop: amount
    }, 1, function () {
        if (scrolling) {
            scrollContent(direction);
        }
    });
}

働くフィドル