Detecting when user scrolls to bottom of div with jQuery

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

200

I have a div box (called flux) with a variable amount of content inside.
This divbox has overflow set to auto.

Now, what I am trying to do, is, when the use scroll to the bottom of this DIV-box, load more content into the page, I know how to do this (load the content) but I don't know how to detect when the user has scrolled to the bottom of the div tag?
If I wanted to do it for the entire page, I'd take .scrollTop and subtract that from .height.

But I can't seem to do that here?

I've tried taking .scrollTop from flux, and then wrapping all the content inside a div called inner, but if I take the innerHeight of flux it returns 564px (the div is set to 500 as height) and the height of 'innner' it returns 1064, and the scrolltop, when at the bottom of the div says 564.

What can I do?

edited May 14 '17 at 9:59

gvlasov

6,806165086

asked Jun 7 '11 at 20:29

Eax

1,65661832

add a comment |

200

I have a div box (called flux) with a variable amount of content inside.
This divbox has overflow set to auto.

But I can't seem to do that here?

What can I do?

edited May 14 '17 at 9:59

gvlasov

6,806165086

asked Jun 7 '11 at 20:29

Eax

1,65661832

add a comment |

200

I have a div box (called flux) with a variable amount of content inside.
This divbox has overflow set to auto.

But I can't seem to do that here?

What can I do?

edited May 14 '17 at 9:59

gvlasov

6,806165086

asked Jun 7 '11 at 20:29

Eax

1,65661832

I have a div box (called flux) with a variable amount of content inside.
This divbox has overflow set to auto.

But I can't seem to do that here?

What can I do?

javascript jquery

edited May 14 '17 at 9:59

gvlasov

6,806165086

asked Jun 7 '11 at 20:29

Eax

1,65661832

edited May 14 '17 at 9:59

gvlasov

6,806165086

asked Jun 7 '11 at 20:29

Eax

1,65661832

edited May 14 '17 at 9:59

gvlasov

6,806165086

edited May 14 '17 at 9:59

gvlasov

6,806165086

edited May 14 '17 at 9:59

gvlasov

6,806165086

asked Jun 7 '11 at 20:29

Eax

1,65661832

asked Jun 7 '11 at 20:29

Eax

1,65661832

asked Jun 7 '11 at 20:29

Eax

1,65661832

add a comment |

13 Answers
13

active

oldest

votes

386

There are some properties/methods you can use:

$().scrollTop()//how much has been scrolled

$().innerHeight()// inner height of the element

DOMElement.scrollHeight//height of the content of the element

So you can take the sum of the first two properties, and when it equals to the last property, you've reached the end:

jQuery(function($) {

    $('#flux').on('scroll', function() {

        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {

            alert('end reached');

        }

    })

});

http://jsfiddle.net/doktormolle/w7X9N/

Edit: I've updated 'bind' to 'on' as per:

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

edited Jan 21 '16 at 1:13

answered Jun 7 '11 at 20:49

Dr.Molle

106k12158171

2

It will do the binding when the DOM is ready to be sure that the #flux-element is already available.

– Dr.Molle
Oct 21 '12 at 1:58

1

you should update you answer using ON instead of bind, bind is deprecated in favor of On

– ncubica
Apr 18 '13 at 15:21

30

Note: When a user is using zoom levels on their browser, this may not work. Zoom causes innerHeight() to report decimals. In the case of a user zooming out, the sum of scrollTop() and innerHeight() will always be at least a fraction short of scrollHeight. I ended up adding a buffer zone of 20px. The resulting conditional was if(el.scrollTop() + el.innerHeight() >= el[0].scrollHeight - 20) where el equals $(this).

– Nick
Aug 13 '13 at 20:53

1

This is the best answer ever that worked very well for me. Thanks

– ashish yadav
Feb 2 '17 at 7:49

1

It's not working anymore, Can you please confirm that why it's not working, Thanks

– Umair Shah Yousafzai
Jun 26 '17 at 23:08

|
show 9 more comments

I found a solution that when you scroll your window and end of a div shown from bottom gives you an alert.

$(window).bind('scroll', function() {

    if($(window).scrollTop() >= $('.posts').offset().top + $('.posts').outerHeight() - window.innerHeight) {

        alert('end reached');

    }

});

In this example if you scroll down when div (.posts) finish its give you an alert.

edited Jan 5 '16 at 9:53

Codler

7,41353959

answered Apr 26 '14 at 6:17

ehsan Aghaei

42943

This works in a modal window too where others do not...

– Mikeys4u
Oct 2 '14 at 16:20

thank you for this but how can I make the div animate when it reach the bottom of that div? also when you scroll up detect the top of that div then animate also. Just like here on this website lazada.com.ph/apple the sidebar behavior Hope you can help me :)

– Alyssa Reyes
May 5 '16 at 19:37

It works like a magic but the problem it that the alert is executed two times so if you have a call of a function inside it will be executed two times

– 1616
Feb 2 '17 at 11:51

@1616 I have a variable var running = false declared before this. Inside the conditional, I check if(!running) { running = true; // and continue logic } This way it's only called once! When the AJAX completes, set running = false;

– Jacob Raccuia
Feb 9 '18 at 4:20

It's about window, but question is about div.

– Alexander Volkov
Apr 4 at 18:16

add a comment |

Though the question was asked 5.5 years ago, still it is more than relevant in today's UI/UX context. And I would like to add my two cents.

var element = document.getElementById('flux');

if (element.scrollHeight - element.scrollTop === element.clientHeight)

    {

        // element is at the end of its scroll, load more content

    }

Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled

Some elements won't allow you to scroll the full height of the element. In those cases you can use:

var element = docuement.getElementById('flux');

if (element.offsetHeight + element.scrollTop === element.scrollHeight) {

  // element is at the end of its scroll, load more content

}

edited Feb 13 at 19:42

lukashambsch

227

answered Jan 10 '17 at 9:33

Thinking

33125

1

This is the solution you're looking for if you're not using jQuery.

– Petter Pettersson
Jan 3 at 16:03

There is the event handler?

– Alexander Volkov
Apr 4 at 18:18

add a comment |

Just an additional note here as I found this when looking for a solution for a fixed div that I want to scroll. For my scenario I found that its preferable to take into account the padding on the div so I can hit the end exactly. So expanding on @Dr.Molle's answer I add the following

$('#flux').bind('scroll', function() {

    var scrollPosition = $(this).scrollTop() + $(this).outerHeight();

    var divTotalHeight = $(this)[0].scrollHeight 

                          + parseInt($(this).css('padding-top'), 10) 

                          + parseInt($(this).css('padding-bottom'), 10)

                          + parseInt($(this).css('border-top-width'), 10)

                          + parseInt($(this).css('border-bottom-width'), 10);



    if( scrollPosition == divTotalHeight )

    {

      alert('end reached');

    }

  });

That'll give you the precise location, including padding and borders

answered Nov 2 '12 at 15:08

Alexander Millar

15614

add a comment |

this worked for me though

$(window).scroll(function() {

  if ($(window).scrollTop() >= (($(document).height() - $(window).height()) - $('#divID').innerHeight())) {

    console.log('div reached');

  }

});

answered Mar 4 '15 at 2:26

Ricardo Rivas

58357

add a comment |

If you are not using Math.round() function the solution suggested by Dr.Molle will not work in some cases when a browser window has a zoom.

For example
$(this).scrollTop() + $(this).innerHeight() = 600

$(this)[0].scrollHeight yields = 599.99998

600 >= 599.99998 fails.

Here is the correct code:

jQuery(function($) {

    $('#flux').on('scroll', function() {

        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10)) {

            alert('end reached');

        }

    })

});

You may also add some extra margin pixels if you do not need a strict condition

var margin = 4



jQuery(function($) {

    $('#flux').on('scroll', function() {

        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10) - margin) {

            alert('end reached');

        }

    })

});

edited May 23 '17 at 11:47

Community♦

answered May 10 '17 at 13:57

Павел Гавриленко

312

add a comment |

If anyone gets scrollHeight as undefined, then select elements' 1st subelement: mob_top_menu[0].scrollHeight

answered Aug 10 '15 at 9:48

Starwave

1,50311017

add a comment |

not sure if it is any help but this is how I do it.

I have an index panel that is larger that the window and I let it scroll until the end this index is reached. Then I fix it in position. The process is reversed once you scroll toward the top of the page.

Regards.

<style type="text/css">

    .fixed_Bot {    

            position: fixed;     

            bottom: 24px;    

        }     

</style>



<script type="text/javascript">

    $(document).ready(function () {

        var sidebarheight = $('#index').height();

        var windowheight = $(window).height();





        $(window).scroll(function () {

            var scrollTop = $(window).scrollTop();



            if (scrollTop >= sidebarheight - windowheight){

                $('#index').addClass('fixed_Bot');

            }

            else {

                $('#index').removeClass('fixed_Bot');

            }                   

        });

    });



</script>

answered Jan 29 '16 at 18:56

Israel Chapa

113

add a comment |

If you need to use this on a div that has overflow-y as hidden or scroll, something like this may be what you need.

if ($('#element').prop('scrollHeight') - $('#element').scrollTop() <= Math.ceil($('#element').height())) {

    at_bottom = true;

}

I found ceil was needed because prop scrollHeight seems to round, or perhaps some other reason causing this to be off by less than 1.

answered Jan 8 '17 at 20:50

Goose

2,85532753

I won't work incase of infinite scroll

– ashish yadav
Feb 2 '17 at 7:50

Yes - I did the Ceil around the first bit but great point

– Ukuser32
Jan 16 at 11:11

add a comment |

Though this was asked almost 6 years, ago still hot topic in UX design, here is demo snippet if any newbie wanted to use

$(function() {



  /* this is only for demonstration purpose */

  var t = $('.posts').html(),

    c = 1,

    scroll_enabled = true;



  function load_ajax() {



    /* call ajax here... on success enable scroll  */

    $('.posts').append('<h4>' + (++c) + ' </h4>' + t);



    /*again enable loading on scroll... */

    scroll_enabled = true;



  }





  $(window).bind('scroll', function() {

    if (scroll_enabled) {



      /* if 90% scrolled */

    if($(window).scrollTop() >= ($('.posts').offset().top + $('.posts').outerHeight()-window.innerHeight)*0.9) {



        /* load ajax content */

        scroll_enabled = false;  

        load_ajax();

      }



    }



  });



});

h4 {

  color: red;

  font-size: 36px;

  background-color: yellow;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="posts">

  Lorem ipsum dolor sit amet  Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit

  sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br>  Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut

  libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet

  lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque

</div>

answered Jan 3 at 15:59

Akshay Hegde

13k21331

add a comment |

Guys this is the solution to the zoom issue, it works with all zoom levels, in case you need it:

if ( Math.abs(elem.offset().top) + elem.height() + elem.offset().top >= elem.outerHeight() ) {

                    console.log("bottom");

                    // We're at the bottom!

                }

            });

        }

answered Aug 17 '17 at 15:44

Liad Livnat

4,336145178

add a comment |

$(window).on("scroll", function() {

    //get height of the (browser) window aka viewport

    var scrollHeight = $(document).height();

    // get height of the document 

    var scrollPosition = $(window).height() + $(window).scrollTop();

    if ((scrollHeight - scrollPosition) / scrollHeight === 0) {

        // code to run when scroll to bottom of the page

    }

});

This is the code on github.

edited Jun 1 '18 at 17:48

Tim Diekmann

3,42791937

answered Jun 1 '18 at 16:57

aki_sud

add a comment |

-1

Here's another version.

The key code is function scroller() which takes input as the height of the div containing the scrolling section, using overflow:scroll. It approximates 5px from the top or 10px from the bottom as at the top or bottom. Otherwise it's too sensitive. It seems 10px is about the minimum. You'll see it adds 10 to the div height to get the bottom height. I assume 5px might work, I didn't test extensively. YMMV. scrollHeight returns the height of the inner scrolling area, not the displayed height of the div, which in this case is 400px.

<?php



$scrolling_area_height=400;

echo '

<script type="text/javascript">

          function scroller(ourheight) {

            var ourtop=document.getElementById('scrolling_area').scrollTop;

            if (ourtop > (ourheight-''.($scrolling_area_height+10).'')) {

                alert('at the bottom; ourtop:'+ourtop+' ourheight:'+ourheight);

            }

            if (ourtop <= (5)) {

                alert('Reached the top');

            }

          }

</script>



<style type="text/css">

.scroller { 

            display:block;

            float:left;

            top:10px;

            left:10px;

            height:'.$scrolling_area_height.';

            border:1px solid red;

            width:200px;

            overflow:scroll; 

        }

</style>



$content="your content here";



<div id="scrolling_area" class="scroller">

onscroll="var ourheight=document.getElementById('scrolling_area').scrollHeight;

        scroller(ourheight);"

        >'.$content.'

</div>';



?>

answered May 15 '15 at 12:34

John Ostrowick

353

1

-1 because generating javascript+css code from php is bad practice (hard to maintain, no reusability, no website optimizations etc). Furthermore as pointed out by @Alexander Millar the 10px offset can be fixed by taking padding in to account. Anyone considering using this code should think twice...

– Kapitein Witbaard
Jan 29 '16 at 9:32

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f6271237%2fdetecting-when-user-scrolls-to-bottom-of-div-with-jquery%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

13 Answers
13

active

oldest

votes

13 Answers
13

active

oldest

votes

386

There are some properties/methods you can use:

$().scrollTop()//how much has been scrolled

$().innerHeight()// inner height of the element

DOMElement.scrollHeight//height of the content of the element

So you can take the sum of the first two properties, and when it equals to the last property, you've reached the end:

jQuery(function($) {

    $('#flux').on('scroll', function() {

        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {

            alert('end reached');

        }

    })

});

http://jsfiddle.net/doktormolle/w7X9N/

Edit: I've updated 'bind' to 'on' as per:

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

edited Jan 21 '16 at 1:13

answered Jun 7 '11 at 20:49

Dr.Molle

106k12158171

2

It will do the binding when the DOM is ready to be sure that the #flux-element is already available.

– Dr.Molle
Oct 21 '12 at 1:58

1

you should update you answer using ON instead of bind, bind is deprecated in favor of On

– ncubica
Apr 18 '13 at 15:21

30

Note: When a user is using zoom levels on their browser, this may not work. Zoom causes innerHeight() to report decimals. In the case of a user zooming out, the sum of scrollTop() and innerHeight() will always be at least a fraction short of scrollHeight. I ended up adding a buffer zone of 20px. The resulting conditional was if(el.scrollTop() + el.innerHeight() >= el[0].scrollHeight - 20) where el equals $(this).

– Nick
Aug 13 '13 at 20:53

1

This is the best answer ever that worked very well for me. Thanks

– ashish yadav
Feb 2 '17 at 7:49

1

It's not working anymore, Can you please confirm that why it's not working, Thanks

– Umair Shah Yousafzai
Jun 26 '17 at 23:08

|
show 9 more comments

386

There are some properties/methods you can use:

$().scrollTop()//how much has been scrolled

$().innerHeight()// inner height of the element

DOMElement.scrollHeight//height of the content of the element

So you can take the sum of the first two properties, and when it equals to the last property, you've reached the end:

jQuery(function($) {

    $('#flux').on('scroll', function() {

        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {

            alert('end reached');

        }

    })

});

http://jsfiddle.net/doktormolle/w7X9N/

Edit: I've updated 'bind' to 'on' as per:

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

edited Jan 21 '16 at 1:13

answered Jun 7 '11 at 20:49

Dr.Molle

106k12158171

2

It will do the binding when the DOM is ready to be sure that the #flux-element is already available.

– Dr.Molle
Oct 21 '12 at 1:58

1

you should update you answer using ON instead of bind, bind is deprecated in favor of On

– ncubica
Apr 18 '13 at 15:21

30

Note: When a user is using zoom levels on their browser, this may not work. Zoom causes innerHeight() to report decimals. In the case of a user zooming out, the sum of scrollTop() and innerHeight() will always be at least a fraction short of scrollHeight. I ended up adding a buffer zone of 20px. The resulting conditional was if(el.scrollTop() + el.innerHeight() >= el[0].scrollHeight - 20) where el equals $(this).

– Nick
Aug 13 '13 at 20:53

1

This is the best answer ever that worked very well for me. Thanks

– ashish yadav
Feb 2 '17 at 7:49

1

It's not working anymore, Can you please confirm that why it's not working, Thanks

– Umair Shah Yousafzai
Jun 26 '17 at 23:08

|
show 9 more comments

386

There are some properties/methods you can use:

$().scrollTop()//how much has been scrolled

$().innerHeight()// inner height of the element

DOMElement.scrollHeight//height of the content of the element

So you can take the sum of the first two properties, and when it equals to the last property, you've reached the end:

jQuery(function($) {

    $('#flux').on('scroll', function() {

        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {

            alert('end reached');

        }

    })

});

http://jsfiddle.net/doktormolle/w7X9N/

Edit: I've updated 'bind' to 'on' as per:

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

edited Jan 21 '16 at 1:13

answered Jun 7 '11 at 20:49

Dr.Molle

106k12158171

There are some properties/methods you can use:

$().scrollTop()//how much has been scrolled

$().innerHeight()// inner height of the element

DOMElement.scrollHeight//height of the content of the element

So you can take the sum of the first two properties, and when it equals to the last property, you've reached the end:

jQuery(function($) {

    $('#flux').on('scroll', function() {

        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {

            alert('end reached');

        }

    })

});

http://jsfiddle.net/doktormolle/w7X9N/

Edit: I've updated 'bind' to 'on' as per:

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

edited Jan 21 '16 at 1:13

answered Jun 7 '11 at 20:49

Dr.Molle

106k12158171

edited Jan 21 '16 at 1:13

answered Jun 7 '11 at 20:49

Dr.Molle

106k12158171

answered Jun 7 '11 at 20:49

Dr.Molle

106k12158171

answered Jun 7 '11 at 20:49

Dr.Molle

106k12158171

2

It will do the binding when the DOM is ready to be sure that the #flux-element is already available.

– Dr.Molle
Oct 21 '12 at 1:58

1

you should update you answer using ON instead of bind, bind is deprecated in favor of On

– ncubica
Apr 18 '13 at 15:21

30

Note: When a user is using zoom levels on their browser, this may not work. Zoom causes innerHeight() to report decimals. In the case of a user zooming out, the sum of scrollTop() and innerHeight() will always be at least a fraction short of scrollHeight. I ended up adding a buffer zone of 20px. The resulting conditional was if(el.scrollTop() + el.innerHeight() >= el[0].scrollHeight - 20) where el equals $(this).

– Nick
Aug 13 '13 at 20:53

1

This is the best answer ever that worked very well for me. Thanks

– ashish yadav
Feb 2 '17 at 7:49

1

It's not working anymore, Can you please confirm that why it's not working, Thanks

– Umair Shah Yousafzai
Jun 26 '17 at 23:08

|
show 9 more comments

2

It will do the binding when the DOM is ready to be sure that the #flux-element is already available.

– Dr.Molle
Oct 21 '12 at 1:58

1

you should update you answer using ON instead of bind, bind is deprecated in favor of On

– ncubica
Apr 18 '13 at 15:21

30

Note: When a user is using zoom levels on their browser, this may not work. Zoom causes innerHeight() to report decimals. In the case of a user zooming out, the sum of scrollTop() and innerHeight() will always be at least a fraction short of scrollHeight. I ended up adding a buffer zone of 20px. The resulting conditional was if(el.scrollTop() + el.innerHeight() >= el[0].scrollHeight - 20) where el equals $(this).

– Nick
Aug 13 '13 at 20:53

1

This is the best answer ever that worked very well for me. Thanks

– ashish yadav
Feb 2 '17 at 7:49

1

It's not working anymore, Can you please confirm that why it's not working, Thanks

– Umair Shah Yousafzai
Jun 26 '17 at 23:08

It will do the binding when the DOM is ready to be sure that the #flux-element is already available.

– Dr.Molle
Oct 21 '12 at 1:58

you should update you answer using ON instead of bind, bind is deprecated in favor of On

– ncubica
Apr 18 '13 at 15:21

Note: When a user is using zoom levels on their browser, this may not work. Zoom causes innerHeight() to report decimals. In the case of a user zooming out, the sum of scrollTop() and innerHeight() will always be at least a fraction short of scrollHeight. I ended up adding a buffer zone of 20px. The resulting conditional was if(el.scrollTop() + el.innerHeight() >= el[0].scrollHeight - 20) where el equals $(this).

– Nick
Aug 13 '13 at 20:53

This is the best answer ever that worked very well for me. Thanks

– ashish yadav
Feb 2 '17 at 7:49

It's not working anymore, Can you please confirm that why it's not working, Thanks

– Umair Shah Yousafzai
Jun 26 '17 at 23:08

|
show 9 more comments

I found a solution that when you scroll your window and end of a div shown from bottom gives you an alert.

$(window).bind('scroll', function() {

    if($(window).scrollTop() >= $('.posts').offset().top + $('.posts').outerHeight() - window.innerHeight) {

        alert('end reached');

    }

});

In this example if you scroll down when div (.posts) finish its give you an alert.

edited Jan 5 '16 at 9:53

Codler

7,41353959

answered Apr 26 '14 at 6:17

ehsan Aghaei

42943

This works in a modal window too where others do not...

– Mikeys4u
Oct 2 '14 at 16:20

thank you for this but how can I make the div animate when it reach the bottom of that div? also when you scroll up detect the top of that div then animate also. Just like here on this website lazada.com.ph/apple the sidebar behavior Hope you can help me :)

– Alyssa Reyes
May 5 '16 at 19:37

It works like a magic but the problem it that the alert is executed two times so if you have a call of a function inside it will be executed two times

– 1616
Feb 2 '17 at 11:51

@1616 I have a variable var running = false declared before this. Inside the conditional, I check if(!running) { running = true; // and continue logic } This way it's only called once! When the AJAX completes, set running = false;

– Jacob Raccuia
Feb 9 '18 at 4:20

It's about window, but question is about div.

– Alexander Volkov
Apr 4 at 18:16

add a comment |

I found a solution that when you scroll your window and end of a div shown from bottom gives you an alert.

$(window).bind('scroll', function() {

    if($(window).scrollTop() >= $('.posts').offset().top + $('.posts').outerHeight() - window.innerHeight) {

        alert('end reached');

    }

});

In this example if you scroll down when div (.posts) finish its give you an alert.

edited Jan 5 '16 at 9:53

Codler

7,41353959

answered Apr 26 '14 at 6:17

ehsan Aghaei

42943

This works in a modal window too where others do not...

– Mikeys4u
Oct 2 '14 at 16:20

thank you for this but how can I make the div animate when it reach the bottom of that div? also when you scroll up detect the top of that div then animate also. Just like here on this website lazada.com.ph/apple the sidebar behavior Hope you can help me :)

– Alyssa Reyes
May 5 '16 at 19:37

It works like a magic but the problem it that the alert is executed two times so if you have a call of a function inside it will be executed two times

– 1616
Feb 2 '17 at 11:51

@1616 I have a variable var running = false declared before this. Inside the conditional, I check if(!running) { running = true; // and continue logic } This way it's only called once! When the AJAX completes, set running = false;

– Jacob Raccuia
Feb 9 '18 at 4:20

It's about window, but question is about div.

– Alexander Volkov
Apr 4 at 18:16

add a comment |

I found a solution that when you scroll your window and end of a div shown from bottom gives you an alert.

$(window).bind('scroll', function() {

    if($(window).scrollTop() >= $('.posts').offset().top + $('.posts').outerHeight() - window.innerHeight) {

        alert('end reached');

    }

});

In this example if you scroll down when div (.posts) finish its give you an alert.

edited Jan 5 '16 at 9:53

Codler

7,41353959

answered Apr 26 '14 at 6:17

ehsan Aghaei

42943

I found a solution that when you scroll your window and end of a div shown from bottom gives you an alert.

$(window).bind('scroll', function() {

    if($(window).scrollTop() >= $('.posts').offset().top + $('.posts').outerHeight() - window.innerHeight) {

        alert('end reached');

    }

});

In this example if you scroll down when div (.posts) finish its give you an alert.

edited Jan 5 '16 at 9:53

Codler

7,41353959

answered Apr 26 '14 at 6:17

ehsan Aghaei

42943

edited Jan 5 '16 at 9:53

Codler

7,41353959

edited Jan 5 '16 at 9:53

Codler

7,41353959

edited Jan 5 '16 at 9:53

Codler

7,41353959

answered Apr 26 '14 at 6:17

ehsan Aghaei

42943

answered Apr 26 '14 at 6:17

ehsan Aghaei

42943

answered Apr 26 '14 at 6:17

ehsan Aghaei

42943

This works in a modal window too where others do not...

– Mikeys4u
Oct 2 '14 at 16:20

thank you for this but how can I make the div animate when it reach the bottom of that div? also when you scroll up detect the top of that div then animate also. Just like here on this website lazada.com.ph/apple the sidebar behavior Hope you can help me :)

– Alyssa Reyes
May 5 '16 at 19:37

It works like a magic but the problem it that the alert is executed two times so if you have a call of a function inside it will be executed two times

– 1616
Feb 2 '17 at 11:51

@1616 I have a variable var running = false declared before this. Inside the conditional, I check if(!running) { running = true; // and continue logic } This way it's only called once! When the AJAX completes, set running = false;

– Jacob Raccuia
Feb 9 '18 at 4:20

It's about window, but question is about div.

– Alexander Volkov
Apr 4 at 18:16

add a comment |

This works in a modal window too where others do not...

– Mikeys4u
Oct 2 '14 at 16:20

thank you for this but how can I make the div animate when it reach the bottom of that div? also when you scroll up detect the top of that div then animate also. Just like here on this website lazada.com.ph/apple the sidebar behavior Hope you can help me :)

– Alyssa Reyes
May 5 '16 at 19:37

It works like a magic but the problem it that the alert is executed two times so if you have a call of a function inside it will be executed two times

– 1616
Feb 2 '17 at 11:51

@1616 I have a variable var running = false declared before this. Inside the conditional, I check if(!running) { running = true; // and continue logic } This way it's only called once! When the AJAX completes, set running = false;

– Jacob Raccuia
Feb 9 '18 at 4:20

It's about window, but question is about div.

– Alexander Volkov
Apr 4 at 18:16

This works in a modal window too where others do not...

– Mikeys4u
Oct 2 '14 at 16:20

thank you for this but how can I make the div animate when it reach the bottom of that div? also when you scroll up detect the top of that div then animate also. Just like here on this website lazada.com.ph/apple the sidebar behavior Hope you can help me :)

– Alyssa Reyes
May 5 '16 at 19:37

It works like a magic but the problem it that the alert is executed two times so if you have a call of a function inside it will be executed two times

– 1616
Feb 2 '17 at 11:51

@1616 I have a variable var running = false declared before this. Inside the conditional, I check if(!running) { running = true; // and continue logic } This way it's only called once! When the AJAX completes, set running = false;

– Jacob Raccuia
Feb 9 '18 at 4:20

It's about window, but question is about div.

– Alexander Volkov
Apr 4 at 18:16

add a comment |

Though the question was asked 5.5 years ago, still it is more than relevant in today's UI/UX context. And I would like to add my two cents.

var element = document.getElementById('flux');

if (element.scrollHeight - element.scrollTop === element.clientHeight)

    {

        // element is at the end of its scroll, load more content

    }

Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled

Some elements won't allow you to scroll the full height of the element. In those cases you can use:

var element = docuement.getElementById('flux');

if (element.offsetHeight + element.scrollTop === element.scrollHeight) {

  // element is at the end of its scroll, load more content

}

edited Feb 13 at 19:42

lukashambsch

227

answered Jan 10 '17 at 9:33

Thinking

33125

1

This is the solution you're looking for if you're not using jQuery.

– Petter Pettersson
Jan 3 at 16:03

There is the event handler?

– Alexander Volkov
Apr 4 at 18:18

add a comment |

Though the question was asked 5.5 years ago, still it is more than relevant in today's UI/UX context. And I would like to add my two cents.

var element = document.getElementById('flux');

if (element.scrollHeight - element.scrollTop === element.clientHeight)

    {

        // element is at the end of its scroll, load more content

    }

Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled

Some elements won't allow you to scroll the full height of the element. In those cases you can use:

var element = docuement.getElementById('flux');

if (element.offsetHeight + element.scrollTop === element.scrollHeight) {

  // element is at the end of its scroll, load more content

}

edited Feb 13 at 19:42

lukashambsch

227

answered Jan 10 '17 at 9:33

Thinking

33125

1

This is the solution you're looking for if you're not using jQuery.

– Petter Pettersson
Jan 3 at 16:03

There is the event handler?

– Alexander Volkov
Apr 4 at 18:18

add a comment |

Though the question was asked 5.5 years ago, still it is more than relevant in today's UI/UX context. And I would like to add my two cents.

var element = document.getElementById('flux');

if (element.scrollHeight - element.scrollTop === element.clientHeight)

    {

        // element is at the end of its scroll, load more content

    }

Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled

Some elements won't allow you to scroll the full height of the element. In those cases you can use:

var element = docuement.getElementById('flux');

if (element.offsetHeight + element.scrollTop === element.scrollHeight) {

  // element is at the end of its scroll, load more content

}

edited Feb 13 at 19:42

lukashambsch

227

answered Jan 10 '17 at 9:33

Thinking

33125

Though the question was asked 5.5 years ago, still it is more than relevant in today's UI/UX context. And I would like to add my two cents.

var element = document.getElementById('flux');

if (element.scrollHeight - element.scrollTop === element.clientHeight)

    {

        // element is at the end of its scroll, load more content

    }

Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled

Some elements won't allow you to scroll the full height of the element. In those cases you can use:

var element = docuement.getElementById('flux');

if (element.offsetHeight + element.scrollTop === element.scrollHeight) {

  // element is at the end of its scroll, load more content

}

edited Feb 13 at 19:42

lukashambsch

227

answered Jan 10 '17 at 9:33

Thinking

33125

edited Feb 13 at 19:42

lukashambsch

227

edited Feb 13 at 19:42

lukashambsch

227

edited Feb 13 at 19:42

lukashambsch

227

answered Jan 10 '17 at 9:33

Thinking

33125

answered Jan 10 '17 at 9:33

Thinking

33125

answered Jan 10 '17 at 9:33

Thinking

33125

1

This is the solution you're looking for if you're not using jQuery.

– Petter Pettersson
Jan 3 at 16:03

There is the event handler?

– Alexander Volkov
Apr 4 at 18:18

add a comment |

1

This is the solution you're looking for if you're not using jQuery.

– Petter Pettersson
Jan 3 at 16:03

There is the event handler?

– Alexander Volkov
Apr 4 at 18:18

This is the solution you're looking for if you're not using jQuery.

– Petter Pettersson
Jan 3 at 16:03

There is the event handler?

– Alexander Volkov
Apr 4 at 18:18

add a comment |

$('#flux').bind('scroll', function() {

    var scrollPosition = $(this).scrollTop() + $(this).outerHeight();

    var divTotalHeight = $(this)[0].scrollHeight 

                          + parseInt($(this).css('padding-top'), 10) 

                          + parseInt($(this).css('padding-bottom'), 10)

                          + parseInt($(this).css('border-top-width'), 10)

                          + parseInt($(this).css('border-bottom-width'), 10);



    if( scrollPosition == divTotalHeight )

    {

      alert('end reached');

    }

  });

That'll give you the precise location, including padding and borders

answered Nov 2 '12 at 15:08

Alexander Millar

15614

add a comment |

$('#flux').bind('scroll', function() {

    var scrollPosition = $(this).scrollTop() + $(this).outerHeight();

    var divTotalHeight = $(this)[0].scrollHeight 

                          + parseInt($(this).css('padding-top'), 10) 

                          + parseInt($(this).css('padding-bottom'), 10)

                          + parseInt($(this).css('border-top-width'), 10)

                          + parseInt($(this).css('border-bottom-width'), 10);



    if( scrollPosition == divTotalHeight )

    {

      alert('end reached');

    }

  });

That'll give you the precise location, including padding and borders

answered Nov 2 '12 at 15:08

Alexander Millar

15614

add a comment |

$('#flux').bind('scroll', function() {

    var scrollPosition = $(this).scrollTop() + $(this).outerHeight();

    var divTotalHeight = $(this)[0].scrollHeight 

                          + parseInt($(this).css('padding-top'), 10) 

                          + parseInt($(this).css('padding-bottom'), 10)

                          + parseInt($(this).css('border-top-width'), 10)

                          + parseInt($(this).css('border-bottom-width'), 10);



    if( scrollPosition == divTotalHeight )

    {

      alert('end reached');

    }

  });

That'll give you the precise location, including padding and borders

answered Nov 2 '12 at 15:08

Alexander Millar

15614

$('#flux').bind('scroll', function() {

    var scrollPosition = $(this).scrollTop() + $(this).outerHeight();

    var divTotalHeight = $(this)[0].scrollHeight 

                          + parseInt($(this).css('padding-top'), 10) 

                          + parseInt($(this).css('padding-bottom'), 10)

                          + parseInt($(this).css('border-top-width'), 10)

                          + parseInt($(this).css('border-bottom-width'), 10);



    if( scrollPosition == divTotalHeight )

    {

      alert('end reached');

    }

  });

That'll give you the precise location, including padding and borders

answered Nov 2 '12 at 15:08

Alexander Millar

15614

answered Nov 2 '12 at 15:08

Alexander Millar

15614

answered Nov 2 '12 at 15:08

Alexander Millar

15614

answered Nov 2 '12 at 15:08

Alexander Millar

15614

add a comment |

this worked for me though

$(window).scroll(function() {

  if ($(window).scrollTop() >= (($(document).height() - $(window).height()) - $('#divID').innerHeight())) {

    console.log('div reached');

  }

});

answered Mar 4 '15 at 2:26

Ricardo Rivas

58357

add a comment |

this worked for me though

$(window).scroll(function() {

  if ($(window).scrollTop() >= (($(document).height() - $(window).height()) - $('#divID').innerHeight())) {

    console.log('div reached');

  }

});

answered Mar 4 '15 at 2:26

Ricardo Rivas

58357

add a comment |

this worked for me though

$(window).scroll(function() {

  if ($(window).scrollTop() >= (($(document).height() - $(window).height()) - $('#divID').innerHeight())) {

    console.log('div reached');

  }

});

answered Mar 4 '15 at 2:26

Ricardo Rivas

58357

this worked for me though

$(window).scroll(function() {

  if ($(window).scrollTop() >= (($(document).height() - $(window).height()) - $('#divID').innerHeight())) {

    console.log('div reached');

  }

});

answered Mar 4 '15 at 2:26

Ricardo Rivas

58357

answered Mar 4 '15 at 2:26

Ricardo Rivas

58357

answered Mar 4 '15 at 2:26

Ricardo Rivas

58357

answered Mar 4 '15 at 2:26

Ricardo Rivas

58357

add a comment |

If you are not using Math.round() function the solution suggested by Dr.Molle will not work in some cases when a browser window has a zoom.

For example
$(this).scrollTop() + $(this).innerHeight() = 600

$(this)[0].scrollHeight yields = 599.99998

600 >= 599.99998 fails.

Here is the correct code:

jQuery(function($) {

    $('#flux').on('scroll', function() {

        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10)) {

            alert('end reached');

        }

    })

});

You may also add some extra margin pixels if you do not need a strict condition

var margin = 4



jQuery(function($) {

    $('#flux').on('scroll', function() {

        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10) - margin) {

            alert('end reached');

        }

    })

});

edited May 23 '17 at 11:47

Community♦

answered May 10 '17 at 13:57

Павел Гавриленко

312

add a comment |

If you are not using Math.round() function the solution suggested by Dr.Molle will not work in some cases when a browser window has a zoom.

For example
$(this).scrollTop() + $(this).innerHeight() = 600

$(this)[0].scrollHeight yields = 599.99998

600 >= 599.99998 fails.

Here is the correct code:

jQuery(function($) {

    $('#flux').on('scroll', function() {

        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10)) {

            alert('end reached');

        }

    })

});

You may also add some extra margin pixels if you do not need a strict condition

var margin = 4



jQuery(function($) {

    $('#flux').on('scroll', function() {

        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10) - margin) {

            alert('end reached');

        }

    })

});

edited May 23 '17 at 11:47

Community♦

answered May 10 '17 at 13:57

Павел Гавриленко

312

add a comment |

If you are not using Math.round() function the solution suggested by Dr.Molle will not work in some cases when a browser window has a zoom.

For example
$(this).scrollTop() + $(this).innerHeight() = 600

$(this)[0].scrollHeight yields = 599.99998

600 >= 599.99998 fails.

Here is the correct code:

jQuery(function($) {

    $('#flux').on('scroll', function() {

        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10)) {

            alert('end reached');

        }

    })

});

You may also add some extra margin pixels if you do not need a strict condition

var margin = 4



jQuery(function($) {

    $('#flux').on('scroll', function() {

        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10) - margin) {

            alert('end reached');

        }

    })

});

edited May 23 '17 at 11:47

Community♦

answered May 10 '17 at 13:57

Павел Гавриленко

312

If you are not using Math.round() function the solution suggested by Dr.Molle will not work in some cases when a browser window has a zoom.

For example
$(this).scrollTop() + $(this).innerHeight() = 600

$(this)[0].scrollHeight yields = 599.99998

600 >= 599.99998 fails.

Here is the correct code:

jQuery(function($) {

    $('#flux').on('scroll', function() {

        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10)) {

            alert('end reached');

        }

    })

});

You may also add some extra margin pixels if you do not need a strict condition

var margin = 4



jQuery(function($) {

    $('#flux').on('scroll', function() {

        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10) - margin) {

            alert('end reached');

        }

    })

});

edited May 23 '17 at 11:47

Community♦

answered May 10 '17 at 13:57

Павел Гавриленко

312

edited May 23 '17 at 11:47

Community♦

edited May 23 '17 at 11:47

Community♦

edited May 23 '17 at 11:47

Community♦

answered May 10 '17 at 13:57

Павел Гавриленко

312

answered May 10 '17 at 13:57

Павел Гавриленко

312

answered May 10 '17 at 13:57

Павел Гавриленко

312

add a comment |

If anyone gets scrollHeight as undefined, then select elements' 1st subelement: mob_top_menu[0].scrollHeight

answered Aug 10 '15 at 9:48

Starwave

1,50311017

add a comment |

If anyone gets scrollHeight as undefined, then select elements' 1st subelement: mob_top_menu[0].scrollHeight

answered Aug 10 '15 at 9:48

Starwave

1,50311017

add a comment |

If anyone gets scrollHeight as undefined, then select elements' 1st subelement: mob_top_menu[0].scrollHeight

answered Aug 10 '15 at 9:48

Starwave

1,50311017

If anyone gets scrollHeight as undefined, then select elements' 1st subelement: mob_top_menu[0].scrollHeight

answered Aug 10 '15 at 9:48

Starwave

1,50311017

answered Aug 10 '15 at 9:48

Starwave

1,50311017

answered Aug 10 '15 at 9:48

Starwave

1,50311017

answered Aug 10 '15 at 9:48

Starwave

1,50311017

add a comment |

not sure if it is any help but this is how I do it.

Regards.

<style type="text/css">

    .fixed_Bot {    

            position: fixed;     

            bottom: 24px;    

        }     

</style>



<script type="text/javascript">

    $(document).ready(function () {

        var sidebarheight = $('#index').height();

        var windowheight = $(window).height();





        $(window).scroll(function () {

            var scrollTop = $(window).scrollTop();



            if (scrollTop >= sidebarheight - windowheight){

                $('#index').addClass('fixed_Bot');

            }

            else {

                $('#index').removeClass('fixed_Bot');

            }                   

        });

    });



</script>

answered Jan 29 '16 at 18:56

Israel Chapa

113

add a comment |

not sure if it is any help but this is how I do it.

Regards.

<style type="text/css">

    .fixed_Bot {    

            position: fixed;     

            bottom: 24px;    

        }     

</style>



<script type="text/javascript">

    $(document).ready(function () {

        var sidebarheight = $('#index').height();

        var windowheight = $(window).height();





        $(window).scroll(function () {

            var scrollTop = $(window).scrollTop();



            if (scrollTop >= sidebarheight - windowheight){

                $('#index').addClass('fixed_Bot');

            }

            else {

                $('#index').removeClass('fixed_Bot');

            }                   

        });

    });



</script>

answered Jan 29 '16 at 18:56

Israel Chapa

113

add a comment |

not sure if it is any help but this is how I do it.

Regards.

<style type="text/css">

    .fixed_Bot {    

            position: fixed;     

            bottom: 24px;    

        }     

</style>



<script type="text/javascript">

    $(document).ready(function () {

        var sidebarheight = $('#index').height();

        var windowheight = $(window).height();





        $(window).scroll(function () {

            var scrollTop = $(window).scrollTop();



            if (scrollTop >= sidebarheight - windowheight){

                $('#index').addClass('fixed_Bot');

            }

            else {

                $('#index').removeClass('fixed_Bot');

            }                   

        });

    });



</script>

answered Jan 29 '16 at 18:56

Israel Chapa

113

not sure if it is any help but this is how I do it.

Regards.

<style type="text/css">

    .fixed_Bot {    

            position: fixed;     

            bottom: 24px;    

        }     

</style>



<script type="text/javascript">

    $(document).ready(function () {

        var sidebarheight = $('#index').height();

        var windowheight = $(window).height();





        $(window).scroll(function () {

            var scrollTop = $(window).scrollTop();



            if (scrollTop >= sidebarheight - windowheight){

                $('#index').addClass('fixed_Bot');

            }

            else {

                $('#index').removeClass('fixed_Bot');

            }                   

        });

    });



</script>

answered Jan 29 '16 at 18:56

Israel Chapa

113

answered Jan 29 '16 at 18:56

Israel Chapa

113

answered Jan 29 '16 at 18:56

Israel Chapa

113

answered Jan 29 '16 at 18:56

Israel Chapa

113

add a comment |

If you need to use this on a div that has overflow-y as hidden or scroll, something like this may be what you need.

if ($('#element').prop('scrollHeight') - $('#element').scrollTop() <= Math.ceil($('#element').height())) {

    at_bottom = true;

}

I found ceil was needed because prop scrollHeight seems to round, or perhaps some other reason causing this to be off by less than 1.

answered Jan 8 '17 at 20:50

Goose

2,85532753

I won't work incase of infinite scroll

– ashish yadav
Feb 2 '17 at 7:50

Yes - I did the Ceil around the first bit but great point

– Ukuser32
Jan 16 at 11:11

add a comment |

If you need to use this on a div that has overflow-y as hidden or scroll, something like this may be what you need.

if ($('#element').prop('scrollHeight') - $('#element').scrollTop() <= Math.ceil($('#element').height())) {

    at_bottom = true;

}

I found ceil was needed because prop scrollHeight seems to round, or perhaps some other reason causing this to be off by less than 1.

answered Jan 8 '17 at 20:50

Goose

2,85532753

I won't work incase of infinite scroll

– ashish yadav
Feb 2 '17 at 7:50

Yes - I did the Ceil around the first bit but great point

– Ukuser32
Jan 16 at 11:11

add a comment |

If you need to use this on a div that has overflow-y as hidden or scroll, something like this may be what you need.

if ($('#element').prop('scrollHeight') - $('#element').scrollTop() <= Math.ceil($('#element').height())) {

    at_bottom = true;

}

I found ceil was needed because prop scrollHeight seems to round, or perhaps some other reason causing this to be off by less than 1.

answered Jan 8 '17 at 20:50

Goose

2,85532753

If you need to use this on a div that has overflow-y as hidden or scroll, something like this may be what you need.

if ($('#element').prop('scrollHeight') - $('#element').scrollTop() <= Math.ceil($('#element').height())) {

    at_bottom = true;

}

I found ceil was needed because prop scrollHeight seems to round, or perhaps some other reason causing this to be off by less than 1.

answered Jan 8 '17 at 20:50

Goose

2,85532753

answered Jan 8 '17 at 20:50

Goose

2,85532753

answered Jan 8 '17 at 20:50

Goose

2,85532753

answered Jan 8 '17 at 20:50

Goose

2,85532753

I won't work incase of infinite scroll

– ashish yadav
Feb 2 '17 at 7:50

Yes - I did the Ceil around the first bit but great point

– Ukuser32
Jan 16 at 11:11

add a comment |

I won't work incase of infinite scroll

– ashish yadav
Feb 2 '17 at 7:50

Yes - I did the Ceil around the first bit but great point

– Ukuser32
Jan 16 at 11:11

I won't work incase of infinite scroll

– ashish yadav
Feb 2 '17 at 7:50

Yes - I did the Ceil around the first bit but great point

– Ukuser32
Jan 16 at 11:11

add a comment |

Though this was asked almost 6 years, ago still hot topic in UX design, here is demo snippet if any newbie wanted to use

$(function() {



  /* this is only for demonstration purpose */

  var t = $('.posts').html(),

    c = 1,

    scroll_enabled = true;



  function load_ajax() {



    /* call ajax here... on success enable scroll  */

    $('.posts').append('<h4>' + (++c) + ' </h4>' + t);



    /*again enable loading on scroll... */

    scroll_enabled = true;



  }





  $(window).bind('scroll', function() {

    if (scroll_enabled) {



      /* if 90% scrolled */

    if($(window).scrollTop() >= ($('.posts').offset().top + $('.posts').outerHeight()-window.innerHeight)*0.9) {



        /* load ajax content */

        scroll_enabled = false;  

        load_ajax();

      }



    }



  });



});

h4 {

  color: red;

  font-size: 36px;

  background-color: yellow;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="posts">

  Lorem ipsum dolor sit amet  Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit

  sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br>  Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut

  libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet

  lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque

</div>

answered Jan 3 at 15:59

Akshay Hegde

13k21331

add a comment |

Though this was asked almost 6 years, ago still hot topic in UX design, here is demo snippet if any newbie wanted to use

$(function() {



  /* this is only for demonstration purpose */

  var t = $('.posts').html(),

    c = 1,

    scroll_enabled = true;



  function load_ajax() {



    /* call ajax here... on success enable scroll  */

    $('.posts').append('<h4>' + (++c) + ' </h4>' + t);



    /*again enable loading on scroll... */

    scroll_enabled = true;



  }





  $(window).bind('scroll', function() {

    if (scroll_enabled) {



      /* if 90% scrolled */

    if($(window).scrollTop() >= ($('.posts').offset().top + $('.posts').outerHeight()-window.innerHeight)*0.9) {



        /* load ajax content */

        scroll_enabled = false;  

        load_ajax();

      }



    }



  });



});

h4 {

  color: red;

  font-size: 36px;

  background-color: yellow;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="posts">

  Lorem ipsum dolor sit amet  Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit

  sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br>  Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut

  libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet

  lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque

</div>

answered Jan 3 at 15:59

Akshay Hegde

13k21331

add a comment |

Though this was asked almost 6 years, ago still hot topic in UX design, here is demo snippet if any newbie wanted to use

$(function() {



  /* this is only for demonstration purpose */

  var t = $('.posts').html(),

    c = 1,

    scroll_enabled = true;



  function load_ajax() {



    /* call ajax here... on success enable scroll  */

    $('.posts').append('<h4>' + (++c) + ' </h4>' + t);



    /*again enable loading on scroll... */

    scroll_enabled = true;



  }





  $(window).bind('scroll', function() {

    if (scroll_enabled) {



      /* if 90% scrolled */

    if($(window).scrollTop() >= ($('.posts').offset().top + $('.posts').outerHeight()-window.innerHeight)*0.9) {



        /* load ajax content */

        scroll_enabled = false;  

        load_ajax();

      }



    }



  });



});

h4 {

  color: red;

  font-size: 36px;

  background-color: yellow;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="posts">

  Lorem ipsum dolor sit amet  Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit

  sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br>  Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut

  libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet

  lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque

</div>

answered Jan 3 at 15:59

Akshay Hegde

13k21331

Though this was asked almost 6 years, ago still hot topic in UX design, here is demo snippet if any newbie wanted to use

$(function() {



  /* this is only for demonstration purpose */

  var t = $('.posts').html(),

    c = 1,

    scroll_enabled = true;



  function load_ajax() {



    /* call ajax here... on success enable scroll  */

    $('.posts').append('<h4>' + (++c) + ' </h4>' + t);



    /*again enable loading on scroll... */

    scroll_enabled = true;



  }





  $(window).bind('scroll', function() {

    if (scroll_enabled) {



      /* if 90% scrolled */

    if($(window).scrollTop() >= ($('.posts').offset().top + $('.posts').outerHeight()-window.innerHeight)*0.9) {



        /* load ajax content */

        scroll_enabled = false;  

        load_ajax();

      }



    }



  });



});

h4 {

  color: red;

  font-size: 36px;

  background-color: yellow;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="posts">

  Lorem ipsum dolor sit amet  Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit

  sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br>  Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut

  libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet

  lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque

</div>

$(function() {



  /* this is only for demonstration purpose */

  var t = $('.posts').html(),

    c = 1,

    scroll_enabled = true;



  function load_ajax() {



    /* call ajax here... on success enable scroll  */

    $('.posts').append('<h4>' + (++c) + ' </h4>' + t);



    /*again enable loading on scroll... */

    scroll_enabled = true;



  }





  $(window).bind('scroll', function() {

    if (scroll_enabled) {



      /* if 90% scrolled */

    if($(window).scrollTop() >= ($('.posts').offset().top + $('.posts').outerHeight()-window.innerHeight)*0.9) {



        /* load ajax content */

        scroll_enabled = false;  

        load_ajax();

      }



    }



  });



});

h4 {

  color: red;

  font-size: 36px;

  background-color: yellow;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="posts">

  Lorem ipsum dolor sit amet  Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit

  sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br>  Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut

  libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet

  lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque

</div>

$(function() {



  /* this is only for demonstration purpose */

  var t = $('.posts').html(),

    c = 1,

    scroll_enabled = true;



  function load_ajax() {



    /* call ajax here... on success enable scroll  */

    $('.posts').append('<h4>' + (++c) + ' </h4>' + t);



    /*again enable loading on scroll... */

    scroll_enabled = true;



  }





  $(window).bind('scroll', function() {

    if (scroll_enabled) {



      /* if 90% scrolled */

    if($(window).scrollTop() >= ($('.posts').offset().top + $('.posts').outerHeight()-window.innerHeight)*0.9) {



        /* load ajax content */

        scroll_enabled = false;  

        load_ajax();

      }



    }



  });



});

h4 {

  color: red;

  font-size: 36px;

  background-color: yellow;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="posts">

  Lorem ipsum dolor sit amet  Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit

  sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br>  Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut

  libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet

  lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque

</div>

answered Jan 3 at 15:59

Akshay Hegde

13k21331

answered Jan 3 at 15:59

Akshay Hegde

13k21331

answered Jan 3 at 15:59

Akshay Hegde

13k21331

answered Jan 3 at 15:59

Akshay Hegde

13k21331

add a comment |

Guys this is the solution to the zoom issue, it works with all zoom levels, in case you need it:

if ( Math.abs(elem.offset().top) + elem.height() + elem.offset().top >= elem.outerHeight() ) {

                    console.log("bottom");

                    // We're at the bottom!

                }

            });

        }

answered Aug 17 '17 at 15:44

Liad Livnat

4,336145178

add a comment |

Guys this is the solution to the zoom issue, it works with all zoom levels, in case you need it:

if ( Math.abs(elem.offset().top) + elem.height() + elem.offset().top >= elem.outerHeight() ) {

                    console.log("bottom");

                    // We're at the bottom!

                }

            });

        }

answered Aug 17 '17 at 15:44

Liad Livnat

4,336145178

add a comment |

Guys this is the solution to the zoom issue, it works with all zoom levels, in case you need it:

if ( Math.abs(elem.offset().top) + elem.height() + elem.offset().top >= elem.outerHeight() ) {

                    console.log("bottom");

                    // We're at the bottom!

                }

            });

        }

answered Aug 17 '17 at 15:44

Liad Livnat

4,336145178

Guys this is the solution to the zoom issue, it works with all zoom levels, in case you need it:

if ( Math.abs(elem.offset().top) + elem.height() + elem.offset().top >= elem.outerHeight() ) {

                    console.log("bottom");

                    // We're at the bottom!

                }

            });

        }

answered Aug 17 '17 at 15:44

Liad Livnat

4,336145178

answered Aug 17 '17 at 15:44

Liad Livnat

4,336145178

answered Aug 17 '17 at 15:44

Liad Livnat

4,336145178

answered Aug 17 '17 at 15:44

Liad Livnat

4,336145178

add a comment |

$(window).on("scroll", function() {

    //get height of the (browser) window aka viewport

    var scrollHeight = $(document).height();

    // get height of the document 

    var scrollPosition = $(window).height() + $(window).scrollTop();

    if ((scrollHeight - scrollPosition) / scrollHeight === 0) {

        // code to run when scroll to bottom of the page

    }

});

This is the code on github.

edited Jun 1 '18 at 17:48

Tim Diekmann

3,42791937

answered Jun 1 '18 at 16:57

aki_sud

add a comment |

$(window).on("scroll", function() {

    //get height of the (browser) window aka viewport

    var scrollHeight = $(document).height();

    // get height of the document 

    var scrollPosition = $(window).height() + $(window).scrollTop();

    if ((scrollHeight - scrollPosition) / scrollHeight === 0) {

        // code to run when scroll to bottom of the page

    }

});

This is the code on github.

edited Jun 1 '18 at 17:48

Tim Diekmann

3,42791937

answered Jun 1 '18 at 16:57

aki_sud

add a comment |

$(window).on("scroll", function() {

    //get height of the (browser) window aka viewport

    var scrollHeight = $(document).height();

    // get height of the document 

    var scrollPosition = $(window).height() + $(window).scrollTop();

    if ((scrollHeight - scrollPosition) / scrollHeight === 0) {

        // code to run when scroll to bottom of the page

    }

});

This is the code on github.

edited Jun 1 '18 at 17:48

Tim Diekmann

3,42791937

answered Jun 1 '18 at 16:57

aki_sud

$(window).on("scroll", function() {

    //get height of the (browser) window aka viewport

    var scrollHeight = $(document).height();

    // get height of the document 

    var scrollPosition = $(window).height() + $(window).scrollTop();

    if ((scrollHeight - scrollPosition) / scrollHeight === 0) {

        // code to run when scroll to bottom of the page

    }

});

This is the code on github.

edited Jun 1 '18 at 17:48

Tim Diekmann

3,42791937

answered Jun 1 '18 at 16:57

aki_sud

edited Jun 1 '18 at 17:48

Tim Diekmann

3,42791937

edited Jun 1 '18 at 17:48

Tim Diekmann

3,42791937

edited Jun 1 '18 at 17:48

Tim Diekmann

3,42791937

answered Jun 1 '18 at 16:57

aki_sud

answered Jun 1 '18 at 16:57

aki_sud

answered Jun 1 '18 at 16:57

aki_sud

add a comment |

-1

Here's another version.

<?php



$scrolling_area_height=400;

echo '

<script type="text/javascript">

          function scroller(ourheight) {

            var ourtop=document.getElementById('scrolling_area').scrollTop;

            if (ourtop > (ourheight-''.($scrolling_area_height+10).'')) {

                alert('at the bottom; ourtop:'+ourtop+' ourheight:'+ourheight);

            }

            if (ourtop <= (5)) {

                alert('Reached the top');

            }

          }

</script>



<style type="text/css">

.scroller { 

            display:block;

            float:left;

            top:10px;

            left:10px;

            height:'.$scrolling_area_height.';

            border:1px solid red;

            width:200px;

            overflow:scroll; 

        }

</style>



$content="your content here";



<div id="scrolling_area" class="scroller">

onscroll="var ourheight=document.getElementById('scrolling_area').scrollHeight;

        scroller(ourheight);"

        >'.$content.'

</div>';



?>

answered May 15 '15 at 12:34

John Ostrowick

353

1

-1 because generating javascript+css code from php is bad practice (hard to maintain, no reusability, no website optimizations etc). Furthermore as pointed out by @Alexander Millar the 10px offset can be fixed by taking padding in to account. Anyone considering using this code should think twice...

– Kapitein Witbaard
Jan 29 '16 at 9:32

add a comment |

-1

Here's another version.

<?php



$scrolling_area_height=400;

echo '

<script type="text/javascript">

          function scroller(ourheight) {

            var ourtop=document.getElementById('scrolling_area').scrollTop;

            if (ourtop > (ourheight-''.($scrolling_area_height+10).'')) {

                alert('at the bottom; ourtop:'+ourtop+' ourheight:'+ourheight);

            }

            if (ourtop <= (5)) {

                alert('Reached the top');

            }

          }

</script>



<style type="text/css">

.scroller { 

            display:block;

            float:left;

            top:10px;

            left:10px;

            height:'.$scrolling_area_height.';

            border:1px solid red;

            width:200px;

            overflow:scroll; 

        }

</style>



$content="your content here";



<div id="scrolling_area" class="scroller">

onscroll="var ourheight=document.getElementById('scrolling_area').scrollHeight;

        scroller(ourheight);"

        >'.$content.'

</div>';



?>

answered May 15 '15 at 12:34

John Ostrowick

353

1

-1 because generating javascript+css code from php is bad practice (hard to maintain, no reusability, no website optimizations etc). Furthermore as pointed out by @Alexander Millar the 10px offset can be fixed by taking padding in to account. Anyone considering using this code should think twice...

– Kapitein Witbaard
Jan 29 '16 at 9:32

add a comment |

-1

Here's another version.

<?php



$scrolling_area_height=400;

echo '

<script type="text/javascript">

          function scroller(ourheight) {

            var ourtop=document.getElementById('scrolling_area').scrollTop;

            if (ourtop > (ourheight-''.($scrolling_area_height+10).'')) {

                alert('at the bottom; ourtop:'+ourtop+' ourheight:'+ourheight);

            }

            if (ourtop <= (5)) {

                alert('Reached the top');

            }

          }

</script>



<style type="text/css">

.scroller { 

            display:block;

            float:left;

            top:10px;

            left:10px;

            height:'.$scrolling_area_height.';

            border:1px solid red;

            width:200px;

            overflow:scroll; 

        }

</style>



$content="your content here";



<div id="scrolling_area" class="scroller">

onscroll="var ourheight=document.getElementById('scrolling_area').scrollHeight;

        scroller(ourheight);"

        >'.$content.'

</div>';



?>

answered May 15 '15 at 12:34

John Ostrowick

353

Here's another version.

<?php



$scrolling_area_height=400;

echo '

<script type="text/javascript">

          function scroller(ourheight) {

            var ourtop=document.getElementById('scrolling_area').scrollTop;

            if (ourtop > (ourheight-''.($scrolling_area_height+10).'')) {

                alert('at the bottom; ourtop:'+ourtop+' ourheight:'+ourheight);

            }

            if (ourtop <= (5)) {

                alert('Reached the top');

            }

          }

</script>



<style type="text/css">

.scroller { 

            display:block;

            float:left;

            top:10px;

            left:10px;

            height:'.$scrolling_area_height.';

            border:1px solid red;

            width:200px;

            overflow:scroll; 

        }

</style>



$content="your content here";



<div id="scrolling_area" class="scroller">

onscroll="var ourheight=document.getElementById('scrolling_area').scrollHeight;

        scroller(ourheight);"

        >'.$content.'

</div>';



?>

answered May 15 '15 at 12:34

John Ostrowick

353

answered May 15 '15 at 12:34

John Ostrowick

353

answered May 15 '15 at 12:34

John Ostrowick

353

answered May 15 '15 at 12:34

John Ostrowick

353

1

-1 because generating javascript+css code from php is bad practice (hard to maintain, no reusability, no website optimizations etc). Furthermore as pointed out by @Alexander Millar the 10px offset can be fixed by taking padding in to account. Anyone considering using this code should think twice...

– Kapitein Witbaard
Jan 29 '16 at 9:32

add a comment |

1

-1 because generating javascript+css code from php is bad practice (hard to maintain, no reusability, no website optimizations etc). Furthermore as pointed out by @Alexander Millar the 10px offset can be fixed by taking padding in to account. Anyone considering using this code should think twice...

– Kapitein Witbaard
Jan 29 '16 at 9:32

-1 because generating javascript+css code from php is bad practice (hard to maintain, no reusability, no website optimizations etc). Furthermore as pointed out by @Alexander Millar the 10px offset can be fixed by taking padding in to account. Anyone considering using this code should think twice...

– Kapitein Witbaard
Jan 29 '16 at 9:32

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu