Android Webview - Detecting the header name as the user scrolls

Issue

I have html files in this pattern.

<a name="header1"></a>
<h2>First Heading</h2>
<a>Some Text goes here</a><br/>
<br/>
<a name="header2"></a>
<h2>Second Heading</h2>
Some Text goes here<br/>
<br/>

Which Looks like this :

---

First Heading

Some Text goes here

Second Heading

Some Text goes here

---

In a ListView, I have the list of all the headers in the html file and based on which header the user selects, I bring the corresponding header to the top of the screen by doing view.loadUrl("javascript:window.location.hash='" + headerName + "'") in the custom WebViewClient's onPageFinished method and change the title of the screen in the titleBar to the headerName.

Now my problem is : If a user selects header1 in the ListView and scrolls down to header2, I need to know that the user is in the header2 section so that the title of the screen could be changed. How can I know which part of the html file is being shown on the screen?

Any help is appreciated.

Solution

I would use javascript on a setInterval() to monitor when the header was in view by tracking the window.scrollY and comparing it to the page position of the header (which you should likely calculate and cache). Hints on page position here. After that, update the URL of the window from javascript, and track it via your WebViewClient's methods, and you should be all set.

Answered By - Sajid