3

Okay, so after doing a lot of research on this very site, I have written the code to perform infinite scrolling.

JS:

$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        alert('This is Bottom!');
    }
});

Thing is, this works perfectly fine when run in Mozilla. But when I tried the same in Chrome or Opera, it didn't work.

Could you guys please help me out and tell me where the problem lies?

Talha Awan
  • 4,070
  • 4
  • 21
  • 39
Sanjay Shanbhag
  • 33
  • 4
  • Please click the `<>` snippet editor and show a [mcve] - also look in the console. Also do NOT alert in an event handler that is triggered all the time. Use console.log – mplungjan Jul 15 '17 at 17:47
  • If you're using jQuery, I'd suggest using something like waypoints instead. – Win Jul 15 '17 at 17:49
  • In the actual code, I don't use alert at all. I wrote ajax to retrieve data from database. Only here, I have replaced that part with alert so that it won't be lengthy and hard to understand. – Sanjay Shanbhag Jul 15 '17 at 17:51
  • The code does not do anything useful on its own. Add some HTML and show the code runs in FX and not in Chrome – mplungjan Jul 15 '17 at 17:52
  • Here is a good example https://stackoverflow.com/questions/37220397/jquery-not-working-with-infinite-scroll# – mplungjan Jul 15 '17 at 17:58

1 Answers1

0

Try to use >= instead ==, if don't helps you, try to display each of variables in console.log and analyze this

Vytaliy Makovyak
  • 68
  • 7
  • I changed == to >= and also checked the logs. During which I noticed something. When the console is open, that is the responsive design mode, this code works in chrome. But as soon as I close the console and the page is open completely, it doesn't work. Any idea why that might be happening? – Sanjay Shanbhag Jul 15 '17 at 18:36
  • Try to use this for example. I think that window height is wrong. (for ex. 650 instead 700). $(window).scroll(function() { if ($(window).scrollTop() + $(window).height() >= ($(document).height() - 200)) { alert('This is Bottom!'); } }); – Vytaliy Makovyak Jul 15 '17 at 18:41
  • I checked this code and it works on my computer. Try to check on position absolute elements, browser zoom, window height and document height. Also please check on js crash and another errors. Maybe your codes are duplicated. – Vytaliy Makovyak Jul 15 '17 at 18:47
  • Well, I tried it and it almost worked. But not quite. It continuously kept on alerting my browser with no end. I tried it with real time data instead of alert and all my data got loaded at once. The problem still persists. :( – Sanjay Shanbhag Jul 15 '17 at 18:57
  • try to scroll at the end of page and get this sum: $(window).scrollTop() + $(window).height() and contain this with $(document).height(), the difference should be 0. Also you can use $(lastelem).offset().top + elemheight istead $(document).height() – Vytaliy Makovyak Jul 15 '17 at 18:59
  • I tried again, and it worked though with a lesser value than 200. Thank You very much for helping me solve this problem. – Sanjay Shanbhag Jul 15 '17 at 19:03
  • Yeah thanks, I checked and it works like a charm now. :) – Sanjay Shanbhag Jul 15 '17 at 19:04