Uncle Jim's Javascript Examples: Remote Area Scrolling

This is an example of how you can scroll one layer using a second layers scrollbar.
Layer one has a blue border whilst layer two has a red border.

Layer one uses the overflow attribute set at hidden to hide its own scrollbar.

Layer two is created and given a height value, the width of layer two should be no less than 22px for IE and 43px for Moz.
Layer twos overflow attribute is set to auto.

Layer two is then positioned any where you want by using the position attribute

In order to keep the scrollbar of layer two in proportion to the contents of layer one, a third layer is nested in layer two to set the height of layer two.

A small script then checks the height of the contents in layer one and adjusts the height of the nested layer in layer two effectively making the height of layer one and two the same.

The script is first run onload to set the initial height then again when the scrollbar of layer two is moved by including the "onscroll" event to layer twos opening div tag.

An addition effect could be to have the image change depending on how far down the text is scrolled.

No matter how much text is typed into layer one the scrollbar ratio matches the amount of text entered.

[ THE END ]


To scroll left see here

You can copy the script to your clipboard by clicking here
Add onload="chk_height" to the opening BODY tag.
If images are not required just delete the blue lines.

<script type=text/Javascript>
<!--
// another script by Uncle Jim
// www.jdstiles.com
// preload images
var YourImages = new Array("pic16.jpg","pic17.jpg")// list images to preload
var preloadYourImages=new Array() // preloads images
for (i=0;i<=YourImages.length-1;i++) {
preloadYourImages[i]=new Image()
preloadYourImages[i].src=YourImages[i]
}
function chk_height(){

div1_height=parseInt(document.getElementById("div1").style.height) // div1 height
div2_height=parseInt(document.getElementById("div2").style.height) // div2 height
height_offset=div1_height - div2_height // height difference

document.getElementById("div1").scrollTop = document.getElementById("div2").scrollTop
document.getElementById("temp_div").style.height = document.getElementById("div1").scrollHeight - height_offset

scroll_pos=document.getElementById("div1").scrollTop
if(scroll_pos<400){document.pic.src="pic16.jpg"}
if(scroll_pos>400){document.pic.src="pic17.jpg"}
}
// onload="chk_height()" // add to the opening BODY tag
// -->
</script>

You can copy the example to your clipboard by clicking here

<div id="div1" style="position:absolute; left:30px; top:100px; width:330px; height:200px; overflow:hidden; border:2px dotted blue; padding:5px;background-color:#c9bda9">

<P>Example Text<P>Example Text<P>Example Text<P>Example Text<P>Example Text<P>Example Text<P>Example Text<P>Example Text<P>Example Text<P>Example Text<P>Example Text<P>Example Text

</div>

<img name="pic" src="pic1.jpg" width="150" height="100" alt="Place your image here" style="position:absolute; left:380; top:100">

<DIV id="div2" style="position:absolute; left:590px; top:320px; width:36px; height:100px; overflow:auto; z-index:5; border:2px dotted red" onscroll="chk_height()"><div id="temp_div" style="width:1; height:1"></div></DIV>

Other Examples: Scroll_Layers | Scroll_Zoom | Scroll_Left


Close This Window