The scroll bar is shown when user set "overflow:auto;" and the user can scroll things from top to bottom. The problem is , how can the javascript/jquery check when the scroll bar is either at the bottom or at the top? So that

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

So are there any funciton/ way to check such status? Thanks

Updated: Not working- using jquery ui dialog

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

The scroll bar is shown when user set "overflow:auto;" and the user can scroll things from top to bottom. The problem is , how can the javascript/jquery check when the scroll bar is either at the bottom or at the top? So that

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

So are there any funciton/ way to check such status? Thanks

Updated: Not working- using jquery ui dialog

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

• javascript
• jquery
• html
• scroll
• scrollbar

• 3 If $(window).scrollTop() is zero, it's at the top, if it's the same as the document.heigh - window.height it's at the bottom. – adeneo Commented Jan 7, 2013 at 9:39
• @adeneo post this as answer! – lukasgeiter Commented Jan 7, 2013 at 9:42
• There is an extra comma after resizable: false... Was that a copy paste mistake..? – Anujith Commented Jan 7, 2013 at 10:13
• @A.V that won't cause an issue – Prisoner Commented Jan 7, 2013 at 10:14

2 Answers 2

HTML:

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

SCRIPT:

$(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!");
        }
    });
});

check

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