如何检查滚动条的状态是否已经在顶部或底部？

Question

当用户设置"overflow:auto;"时，滚动条会出现，用户可以从上到下滑动内容。问题是，如何让javascript/jquery检查滚动条是在底部还是顶部？这样

注：无需翻译，保留的html标签为

和

。

if (is_scrollbar_top || is_scrollbar_end)
//do some thing..

是否有任何函数/方法可以检查这种状态？谢谢。

更新：不起作用-使用jquery ui对话框

HTML：

<div class = "dialog" id="dialog" title="Past Issues"></div>

JavaScript：

$('#pastIssues').click(function (event) {
            var issueString = 'product=Headline&year=2012&month=12';
            $('.issues,#issuesBox').remove();
            var dWidth = $(window).width() * 0.9; 
            var dHeight = $(window).height() * 0.9;

            $( "#dialog" ).dialog({
                    height: dHeight,
                    width: dWidth,
                    modal: true,
                    draggable: false, 
                    resizable: false,
            });

            get_past_issues(issueString,2012,12,event.type);
            return false;
        }); 

- user782104

---

如果 $(window).scrollTop() 为零，则表示在顶部，如果它与 document.heigh - window.height 相同，则表示在底部。 - adeneo

@adeneo 把这个作为答案发布！ - lukasgeiter

resizable: false 后面有一个额外的逗号... 这是复制粘贴错误吗..? - Anujith

@A.V 这不会引起任何问题。 - Prisoner

Answer 1

HTML：

<div id="mydiv" style="overflow: auto; height: 500px"></div>

脚本：

$(document).ready(function()
{
    $("#mydiv").scroll(function()
    {
        var div = $(this);
        if (div[0].scrollHeight - div.scrollTop() == div.height())
        {
            alert("Reached the bottom!");
        }
        else if(div.scrollTop() == 0)
        {
            alert("Reached the top!");
        }
    });
});

- Anujith

Answer 2

检查

if($(window).scrollTop() == 0 || $(window).scrollTop() == $(document).height()- $(window).height()) {
   // do something
}

- TechSpellBound