Overflow Scroller Testing

gibney.org : Technology : Javascript : Experiments : Overflow Scroller Testing

(Entry Nr. 369, by user 70 | edit)

#inner
{
 font-size: 250%;
 background-color: red;
 position: relative;
 left: 160px;
}

.Scroll
{
 width: 20px;
 height: 250px;
 position: absolute;
}

.Scroll.Left.Slow
{
 border: 1px solid #00ff00;
 right: 20px;
}

.Scroll.Left.Fast
{
 border: 1px solid #00ffff;
 right: 0;
}

.Scroll.Right.Slow
{
 border: 1px solid #ffff00;
 left: 20px;
}

.Scroll.Right.Fast
{
 border: 1px solid #ffffff;
 left: 0;
}

</style>

<!--
Methode 1: Trigger Spans
<div id=outer>
 Dies könnte jetzt ein seeeeehr sehr langer Text sein, jedenfalls ist er blind. und so weiter

3
 4

1
 2
</div>
-->

<pre style="line-height: 0.7em;">
 x:- 
 y:- 
 Outer.x:- 
 Outer.y:-

ScrollX:- 
 speedL:- 
 speedR:- 
 offsetWidth:- 
 offsetHeight:- 
 ScrollStatus:-

</pre>

Methode 2: Mouse Capture

<div id=outer style="cursor: crosshair; padding: 20px 0 20px 0; margin: 100px;">
 
 Dies könnte jetzt ein seeeeehr sehr langer Text sein, jedenfalls ist er blind. Und so weiter. Kennt ihr schon die Geschichte von der kleinen Fee
 und den britischen Kronjuwelen? Ja? Ach so, na dann... Tja, ansonsten könnte ich auch noch die erzählen von dem kleinen Osterhäschen, das...
 Ach so, kennt ihr auch schon? Gut, also, dann eben nicht.
 Dies könnte jetzt ein seeeeehr sehr langer Text sein, jedenfalls ist er blind. Und so weiter. Kennt ihr schon die Geschichte von der kleinen Fee
 und den britischen Kronjuwelen? Ja? Ach so, na dann... Tja, ansonsten könnte ich auch noch die erzählen von dem kleinen Osterhäschen, das...
 Ach so, kennt ihr auch schon? Gut, also, dann eben nicht.
 Dies könnte jetzt ein seeeeehr sehr langer Text sein, jedenfalls ist er blind. Und so weiter. Kennt ihr schon die Geschichte von der kleinen Fee
 und den britischen Kronjuwelen? Ja? Ach so, na dann... Tja, ansonsten könnte ich auch noch die erzählen von dem kleinen Osterhäschen, das...
 Ach so, kennt ihr auch schon? Gut, also, dann eben nicht.
 
</div>

function getDocScrollX() // cross-browser abstraction of request for the document's scroll position
{
 var scrollX = 0;

if( typeof( window.pageXOffset ) == 'number' )
 {
  //Netscape compliant
  scrollX = window.pageXOffset;
 }
 else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) )
 {
  //DOM compliant
  scrollX = document.body.scrollLeft;
 }
 else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) )
 {
  //IE6 standards compliant mode
  scrollX = document.documentElement.scrollLeft;
 }
 return scrollX;
}

function getDocScrollY() // cross-browser abstraction of request for the document's scroll position
{
 var scrollY = 0;

if( typeof( window.pageYOffset ) == 'number' )
 {
  //Netscape compliant
  scrollY = window.pageYOffset;
 }
 else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) )
 {
  //DOM compliant
  scrollY = document.body.scrollTop;
 }
 else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) )
 {
  //IE6 standards compliant mode
  scrollY = document.documentElement.scrollTop;
 }
 return scrollY;
}

function ScrollStart()
{
 Brake=1;
 if (Scrolling) return;
 Scrolling = window.setInterval("Scroll()",20);
 document.getElementById("ss").innerHTML="start";
}

function Scroll()
{
 Inner.style.left=Inner.offsetLeft+Speed;
 Speed=Speed/Brake;
 if (Speed<0.5&&Speed>-0.5)
 {
 window.clearInterval(Scrolling);
 Scrolling=false;
 Speed=0;
 }
}

function ScrollStop()
{
 Brake=1.1;
}

function handleMouseMove(e)
{
 if (!e) var e = window.event;

Outer.X = mg_getElementX(Outer);
 Outer.Y = mg_getElementY(Outer);

var MouseX = isDOM ? e.clientX-Outer.X: event.clientX-Outer.X;
 var MouseY = isDOM ? e.clientY-Outer.Y: event.clientY-Outer.Y;

MouseX+=getDocScrollX(); //compensate for document scroll position
 MouseY+=getDocScrollY();

document.getElementById("xcoord").innerHTML=MouseX;
 document.getElementById("ycoord").innerHTML=MouseY;
 document.getElementById("scrollx").innerHTML=getDocScrollX();
 document.getElementById("bld").innerHTML=".";
 document.getElementById("brd").innerHTML=".";
 document.getElementById("ow").innerHTML=Outer.offsetWidth;
 document.getElementById("oh").innerHTML=Outer.offsetHeight;

document.getElementById("outerx").innerHTML=Outer.X;
 document.getElementById("outery").innerHTML=Outer.Y;

if (MouseX<SenseArea) // Cursor is in the left SenseArea 
 { 
 Speed=Math.pow(MaxSpeed-MouseX/SenseArea*MaxSpeed,2)/MaxSpeed;
 document.getElementById("bld").innerHTML=Speed;
 ScrollStart();
 }
 else if (MouseX>Outer.offsetWidth-SenseArea) // Cursor is in the right SenseArea
 { 
 Speed=-Math.pow(MaxSpeed-(Outer.offsetWidth-MouseX)/SenseArea*MaxSpeed,2)/MaxSpeed;
 document.getElementById("brd").innerHTML=Speed;
 ScrollStart(); 
 }
 else
 {
 ScrollStop();
 document.getElementById("ss").innerHTML="stop (handleMouseMove)";
 }

return false;
}

function handleMouseOut(e)
{
 if (!e) var e = window.event;

Outer.X = mg_getElementX(Outer);
 Outer.Y = mg_getElementY(Outer);

var MouseX = isDOM ? e.clientX-Outer.X: event.clientX-Outer.X;
 var MouseY = isDOM ? e.clientY-Outer.Y: event.clientY-Outer.Y;

MouseX+=getDocScrollX(); //compensate for document scroll position
 MouseY+=getDocScrollY();

document.getElementById("xcoord").innerHTML=MouseX+" out";
 document.getElementById("ycoord").innerHTML=MouseY+" out";
 document.getElementById("ow").innerHTML=Outer.offsetWidth;
 document.getElementById("oh").innerHTML=Outer.offsetHeight;

if (MouseX<0||MouseX>=Outer.offsetWidth||MouseY<0||MouseY>=Outer.offsetHeight) // extra test necessary because the event is also triggered 
 { // when the mouse only left the inner element.
 ScrollStop();
 document.getElementById("ss").innerHTML="stop (handleMouseOut)";
 return false;
 document.getElementById("xcoord").innerHTML="MOUSE OUT";
 }
}

//-----------------------------------------------------

Inner = document.getElementById("inner");
Outer = Inner.parentNode;

SenseArea=300;   // width of the area at the borders where scrolling is triggered and accelerated the closer it gets to the border
MaxSpeed=30;    // maximum scrolling speed at border cursor position
Speed=0;

Scrolling=false;
Brake=1;
Timers=0;

isDOM=document.getElementById&&!document.all;

document.getElementById("outer").onmousemove=handleMouseMove;
document.getElementById("outer").onmouseout=handleMouseOut;
</script>

</body></html>

Create a new entry at this position