gibney.org
:
Technology
:
Javascript
:
Experiments
:
Overflow Scroller Testing
(Entry Nr. 369, by user 70 |
edit
)
<html><body> <style> #outer { background-color: green; width: 800px; padding: 50px; overflow: hidden; white-space: nowrap; position: relative; } #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> <!-- <p>Methode 1: Trigger Spans</p> <div id=outer> <span id=inner>Dies könnte jetzt ein seeeeehr sehr langer Text sein, jedenfalls ist er blind.</span> und so weiter <span class="Scroll Right Slow" onmouseover="ScrollStart('inner',1)" onmouseout="ScrollStop()">3</span> <span class="Scroll Right Fast" onmouseover="ScrollStart('inner',8)" onmouseout="ScrollStop()">4</span> <span class="Scroll Left Slow" onmouseover="ScrollStart('inner',-1)" onmouseout="ScrollStop()">1</span> <span class="Scroll Left Fast" onmouseover="ScrollStart('inner',-4)" onmouseout="ScrollStop()">2</span> </div> --> <pre style="line-height: 0.7em;"> x:<span id=xcoord>-</span><br> y:<span id=ycoord>-</span><br> Outer.x:<span id=outerx>-</span><br> Outer.y:<span id=outery>-</span><br> ScrollX:<span id=scrollx>-</span><br> speedL:<span id=bld>-</span><br> speedR:<span id=brd>-</span><br> offsetWidth:<span id=ow>-</span><br> offsetHeight:<span id=oh>-</span><br> ScrollStatus:<span id=ss>-</span><br> </pre> <p>Methode 2: Mouse Capture</p> <div id=outer style="cursor: crosshair; padding: 20px 0 20px 0; margin: 100px;"> <span id=inner> 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. </span> </div> <script> 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 mg_getElementX(obj) { var curleft = 0; if (obj.offsetParent) { while (obj.offsetParent) { curleft += obj.offsetLeft obj = obj.offsetParent; } } else if (obj.x) curleft += obj.x; return curleft; } function mg_getElementY(obj) { var curtop = 0; if (obj.offsetParent) { while (obj.offsetParent) { curtop += obj.offsetTop obj = obj.offsetParent; } } else if (obj.y) curtop += obj.y; return curtop; } 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