javascript dhtml onscroll scrollTop

Posted on 2007-10-16
Medium Priority
Last Modified: 2013-11-19
Hi, i've got the following code:

<script language="JavaScript" type="text/javascript">

function f_filterResults(n_win, n_docel, n_body) {
      var n_result = n_win ? n_win : 0;
      if (n_docel && (!n_result || (n_result > n_docel)))
            n_result = n_docel;
      return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;

function f_clientHeight() {
      return f_filterResults (
            window.innerHeight ? window.innerHeight : 0,
            document.documentElement ? document.documentElement.clientHeight : 0,
            document.body ? document.body.clientHeight : 0

function f_clientWidth() {
      return f_filterResults (
            window.innerWidth ? window.innerWidth : 0,
            document.documentElement ? document.documentElement.clientWidth : 0,
            document.body ? document.body.clientWidth : 0

function SetDivWidth(){
      var mydiv = document.getElementById("maincontainer");

      var curr_width = mydiv.style.width;
// now add 10 to the width
      mydiv.style.width = f_clientWidth() -16;

        var myimginscroller = document.getElementById("imgscroller");

        myimginscroller.height = (f_clientHeight() * 4);

function zztt(){
document.getElementById("maincontainer").innerHTML = document.getElementById("scroller").scrollTop


<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" onload="SetDivWidth()" onresize="SetDivWidth()">
<div id="scroller" onscroll="zztt();" style="padding: 0px; background-color: rgb(41, 41, 41); color: white; position: absolute; right: 0px; top: 0px; width: 16px; height: 100%; overflow-y: scroll;">
<img id="imgscroller" src="a.bmp" height="10" width=10">

<div id="maincontainer" style="padding: 0px; position: absolute; right: 16px; top: 0px; background-color: orange; width: 100%; height: 100%;">

how can i make the updated value in the orange div (maincontainer) a percentage? (ie 0% if the scrollbar's at the top, and 100% if it's at the bottom).
My codes not working on the body height, it's working on the window height which i assume are different, i've been playing for the last couple of hours but am sure someone out there could solve this in 60 seconds!

any help much appreciated,
Question by:jondanger
1 Comment

Accepted Solution

frindo earned 2000 total points
ID: 20089360
I modified the zztt function and used the scrollHeight offset by the offsetHeight to determine a percentage of the whole.

Here is the new function:

function zztt(){
document.getElementById("maincontainer").innerHTML = (parseInt(document.getElementById("scroller").scrollTop)+parseInt(document.getElementById("scroller").clientHeight))/parseInt(document.getElementById("scroller").scrollHeight)*100+"%";

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question