检测滚动条何时到达div的顶部？

Posted 2023-05-08

【中文标题】检测滚动条何时到达div的顶部？

【英文标题】：Detect when scrollbar reaches top of div?

【发布时间】：2012-05-07 19:44:44

【问题描述】：

我正在尝试在我的#container div 的滚动事件上为 boxShadow 设置动画。一切正常，除了我想不出一种检测滚动条到达顶部的好方法，以便 boxShadows 可以动画出来。这是我目前的代码

   $('#container').scroll(
        function()
        
            $('#white').animate(
            
                boxShadow: "0 8px 8px -7px #696868"
            ,
            "fast"); 
            if ($('#container').scrollTop() == 0)
            
                $('#white').animate(
                
                    boxShadow: "0 0 0 0 #696868"
                ,
                "fast");
            
        
    );

我添加了一个演示。最初的滚动动画效果很好，但是当条形图返回顶部时，第二个动画开始之前有相当长的延迟。http://jsfiddle.net/JYqC3/14/

【参考方案1】：

希望对你有帮助

使用.scrollTop

$('#my_div').scroll(function() 
    var pos = $('#my_div').scrollTop();
    if (pos == 0) 
        alert('top of the div');
    
);

DEMO

编辑：在演示中添加了更好的动画

【讨论】：

感谢您的回答。这基本上就是我所写的，如果我要在我的 if 语句中放置一个警报，它会在栏到达顶部时立即触发。出于某种原因，动画在 if 语句中启动有很长的延迟。

在这里我编辑了 jsfiddle。向下滚动并看到阴影立即出现，但是当您滚动到顶部时，您必须等待 5 秒钟才能消失。我正在使用一个 jquery 插件，它包含在 html jsfiddle.net/JYqC3/12

的顶部

更新了我的demo，它绝对不是最好的解决方案，我没有时间，所以做了一个临时修复

非常感谢，但如果用户快速滚动，它就无法捕捉到，但您可能已经知道了。

您知道为什么当您单击栏并拖动以滚动时，这些实现中的任何一个都不起作用吗？