使用按钮和鼠标滚动DIV

时间:2013-10-01 10:39:35

标签: javascript jquery css html scroll

我有一个带溢出滚动的DIV。我想添加2个按钮来滚动该div上下。我只能找到一种方法或用鼠标滚动。或者滚动按钮,因为他们希望我在隐藏时设置溢出。

有两种方法可以做到吗?

1 个答案:

答案 0 :(得分:2)

试试这个:

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);
        }
    });
}

Working fiddle