javascript - 在鼠标悬停时缓慢滚动 div 的内容并在鼠标关闭时停止

Question

请看看这个网站

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

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

1. 我希望当用户鼠标关闭时滚动停止

2. 如果没有更多内容可以滚动，希望不要显示箭头

   if ( $("body").hasClass('projects') ) {
       $("#jig1").height($(document).height() - 187);
   
       $("#scroll-to-bottom").hover(
           function () {
               $("#jig1").animate({ scrollTop: $(document).height() }, 10000);
           },
           function () {
   
           }
       );
   }
   

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

Answer 1

试试这个：

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

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

Answer 2

回答第二个问题。将内部包装器添加到 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();
}