javascript dhtml onscroll scrollTop

Posted on 2007-10-16
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 =;
// now add 10 to the 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
    LVL 3

    Accepted Solution

    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+"%";

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    The viewer will learn how to count occurrences of each item in an array.
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    794 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

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now