CODEWITHSUNDEEP
javascriptjquery
Kalashir
Kalashir

Reputation: 1127

Javascript: How to Detect if browser window is scrolled at bottom on android device

I am implementing lazy load functionality in my application. It is working properly on the iPhone, desktop, tab. But not working on an android phone. Below is my code for calculating bottom - 

$(window).on("scroll", function() {
 var scrollHeight, scrollPosition;
 scrollHeight = $(document).height();
 scrollPosition = $(window).height() + $(window).scrollTop();
 if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
    this.get_data();
 }
});

I have also tried below option but still not able to calculate bottom on android.

if($(document).height() - $(window).scrollTop() - $(window).height() < 50) {
   this.get_data();
 }

Upvotes: 3

Views: 922

Answers (2)

Kalashir
Kalashir

Reputation: 1127

I have solved this issue. Actually logic is correct not issue with it. But have gone through the HTML and CSS and got to know that my HTML is breaking and because of that i was getting wrong scrollTop() and document height.

Upvotes: 0

sheng
sheng

Reputation: 1372

Here's what I think is happening:

When you scroll down to the end of a document in Chrome on Android, it hides the address bar. This causes a dimension change which you're not always picking up because you're not listening for a resize event -- just scroll. That's pretty dumb on the browser side in my opinion.

Anyway:

function update() {
    // ...all your awesome code here
}

$(window).on('resize', update); // look out world, magic happening here
$(window).on('scroll', update);

And, for an example... (I cleaned this up a bit during testing):

var $status = $('#status');
var $window = $(window);
var $document = $(document);

function update() {
  var maxScrollTop = $document.height() - $window.height();
  var scrollTop = $window.scrollTop();

  var calc = maxScrollTop - scrollTop;

  if (calc < 50) {
    $status.html('Load more!!');
  } else {
    $status.html(calc);
  }
}

$window.on('scroll', update);
$window.on('resize', update);
#content {
  height: 2000px;
  background: #eee;
  box-shadow: inset 0 0 0 1px red;
}

#status {
  position: fixed;
  top: 0; left: 0;
  background: #fff;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>

<div id="content"></div>
<div id="status">Scroll to start</div>

Hope that helps!!

Upvotes: 3

Related Questions