Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to check the scroll bar status is already at top or at end?

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;
        }); 
like image 402
user782104 Avatar asked Jan 07 '13 09:01

user782104


1 Answers

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!");
        }
    });
});
like image 105
Anujith Avatar answered Sep 17 '22 17:09

Anujith