Question

请查看此website

我正在尝试在图库的顶部和底部实现两个箭头，因此当人们将鼠标悬停在箭头上时，内容将分别向上和向下滚动。

以下是我正在使用的代码，当您将鼠标悬停在底部箭头上时，会将内容向下滚动。但它有两个问题：

我希望当用户将鼠标移开时滚动停止

如果没有剩余内容可以滚动

，希望不显示箭头

if ( $("body").hasClass('projects') ) {
    $("#jig1").height($(document).height() - 187);

    $("#scroll-to-bottom").hover(
        function () {
            $("#jig1").animate({ scrollTop: $(document).height() }, 10000);
        },
        function () {

        }
    );
}

任何人都可以提供改进的解决方案吗？

Answer 1

回答第二个问题。将内包装添加到div块 Html应该看起来像这样

<div id="jig1">
   <div id="jig1Inner">
     ... here put rest of the code

if ($("body").hasClass('projects')) 
{
    $("#jig1").height($(document).height() - 187);

    var watchScrollers = function()
    {
        var tmp = $("#jig1Inner").height() - $("#jig1").height();
        if (tmp == $("#jig1").scrollTop()) 
        {
            $("#scroll-to-bottom").css("visibility","hidden");
        }
        else
        {
            $("#scroll-to-bottom").css("visibility","visible");
        }
        if ($("#jig1").scrollTop() == 0) 
        {
            $("#scroll-to-top").css("visibility","hidden");
        }
        else
        {
            $("#scroll-to-top").css("visibility","visible");
        }
    }

    $("#scroll-to-bottom").unbind("hover").hover(function() {
        $("#jig1").stop().animate({scrollTop: $("#jig1Inner").height() - $("#jig1").height()}, 10000);
    }, function() {
        $("#jig1").stop(); //stops the animation
        watchScrollers();
    });
    $("#scroll-to-top").unbind("hover").hover(function() {
        $("#jig1").stop().animate({scrollTop: 0}, 10000);
    }, function() {
        $("#jig1").stop(); //stops the animation
        watchScrollers();
    });
    watchScrollers();
}

Answer 2

试试这个：

$("#scroll-to-bottom").mouseover( function () {
   $("#jig1").animate({ scrollTop: $(document).height() }, 10000);
});

$("#scroll-to-bottom").mouseout( function () {
   $("#jig1").stop()
});

在悬停时缓慢滚动div的内容并在mouseoff上停止

2 个答案: