Demo Dynamic HTML - Barra de desplazamiento (scrollbar) gráfica

Barra de desplazamiento (scrollbar) gráfica

Compatibilidad: Ms Internet Explorer, Netscape

Esta demo sorprende por el efecto gráfico que se produce. Es además de gran utilidad cuando se pretende adaptar la gráfica de un IFrame al aspecto cromático del sitio.
El ejemplo utiliza sintaxis javascript e imágenes (contenidas dentro del zip), y hace gran uso de tablas HTML.
También en este caso, como en la demo precedente, se invoca un archivo HTML externo denominado "testo.htm".

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Demo Dynamic HTML: ejemplo práctico </TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--

n = (document.layers) ? 1:0
ie = (document.all) ? 1:0

// Scroll Bar Setup Variables
scrollLeft = 200
scrollTop = 150
scrollNestLeft = 0		// left position of parent layer, 0 if none
scrollNestTop = 0		// top position of parent layer 0 if none
scrollWidth = 230
scrollHeight = 280
scrollBarWidth = 19
scrollBoxHeight = 23
scrollArrowHeight = 15
scrollMarginLeft = 10
scrollMarginRight = 10
scrollMarginTop = 10
scrollMarginBottom = 10
scrollBorder = 2    // width of the border, set to 0 for no border
scrollBorderColor = "#F47A00"
scrollBarColor = "#FFD1BB"
scrollBoxColor = "none"     // use "none" for transparent
scrollArrowColor = "#F47A00"
scrollTextBGColor = "#A8E8DE"
scrollFirstPage = "testo.html"

// Scroll Bar Miscellaneous Variables
scrollLoaded = 0
scrollActive = 0
scrollArrowActive = 0
scrollDownActive = 0
scrollYold = 0
scrollClickY = 0
scrollBarHeight = scrollHeight-2*scrollBorder-scrollBoxHeight-scrollArrowHeight

function init() {
	// attemped bug fix for IE
	if (ie) document.all["scrollBoxDiv"].onmouseout = mouseUp
	document.onmousedown = mouseDown
	document.onmousemove = mouseMove
	document.onmouseup = mouseUp
	if (n) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}

function mouseDown(e) {
	if ((n && e.which == 1) || ie) {
		if (n) {var x=e.pageX; var y=e.pageY}
		if (ie) {var x=event.x; var y=event.y}
		scrollMouseDown(x,y)
	}
}

function mouseMove(e) {
	if (n) {var x=e.pageX; var y=e.pageY}
	if (ie) {var x=event.x; var y=event.y}
	if (scrollLoaded && scrollActive) {
		scrollMouseMove(x,y)
	}
	if (scrollActive || scrollArrowActive) return false
}

function mouseUp(e) {
	scrollActive = 0
	scrollArrowActive = 0
	scrollDownActive = 0
}

function scrollMouseDown(x,y) {
	if (scrollLoaded && scrollFactor<0 && x>=scrollLeft+scrollNestLeft+scrollWidth-scrollBarWidth-scrollBorder && x<(scrollLeft+scrollNestLeft)+scrollWidth-scrollBorder && y>=(scrollTop+scrollNestTop)+scrollBorder && y<(scrollTop+scrollNestTop)+scrollHeight-scrollBorder) {
		if (y>=scrollTop+scrollNestTop+scrollBorder+scrollbox.y && y<(scrollTop+scrollNestTop)+scrollBorder+scrollBoxHeight+scrollbox.y) {  // scrollbox
			scrollClickY = y-scrollbox.y
			scrollYold = y
			scrollActive = 1
		}			
		else if (y<scrollTop+scrollNestTop+scrollBorder+scrollArrowHeight) {  // up arrow
			scrollArrowActive = 1
			scrollArrowDir = 1
			scrollArrowSlide()
		}
		else if (y>=scrollTop+scrollNestTop+scrollHeight-scrollBorder-scrollArrowHeight) {  // down arrow
			scrollArrowActive = 1
			scrollArrowDir = -1
			scrollArrowSlide()
		}
		else {
			if (y<=scrollTop+scrollNestTop+scrollBorder+scrollArrowHeight+scrollBoxHeight/2) {  // jump top
				scrollbox.moveTo(0,scrollArrowHeight)
			}
			else if (y>scrollTop+scrollNestTop+scrollHeight-scrollBorder-scrollArrowHeight-scrollBoxHeight/2) {  // jump bottom
				scrollbox.moveTo(0,scrollBarHeight)
			}
			else { // jump middle
				scrollbox.moveTo(0,y-scrollTop-scrollNestTop-scrollBorder-scrollBoxHeight/2)
			}
			scrolltext.moveTo(scrolltext.x,scrollFactor*(scrollbox.y-scrollArrowHeight)+scrollMarginTop)
			scrollClickY = y-scrollbox.y
			scrollYold = y
			scrollActive = 1
		}
	}
}

function scrollMouseMove(x,y) {
	var diff = y-scrollYold
	if ((scrollbox.y>scrollArrowHeight && scrollbox.y<scrollBarHeight) || (scrollbox.y==scrollArrowHeight && diff>=0) || (scrollbox.y==scrollBarHeight && diff<=0)) {
		if ((scrollbox.y>scrollArrowHeight && scrollbox.y+diff<scrollArrowHeight) || (scrollbox.y<scrollBarHeight && scrollbox.y+diff>scrollBarHeight)) {
			if (scrollbox.y+diff<scrollArrowHeight) scrollbox.moveTo(0,scrollArrowHeight)
			else if (scrollbox.y+diff>scrollBarHeight) scrollbox.moveTo(0,scrollBarHeight)
			scrollYold = scrollbox.y+scrollClickY
		}
		else {
			scrollbox.moveTo(0,y-scrollClickY)
			scrollYold = y
		}
		scrolltext.moveTo(scrolltext.x,scrollFactor*(scrollbox.y-scrollArrowHeight)+scrollMarginTop)
	}
}

function scrollArrowSlide() {
	if (scrollArrowActive) {
		if ((scrollArrowDir==1 && scrolltext.y<scrollMarginTop-5) || (scrollArrowDir==-1 && scrolltext.y>-(scrolltext.height+2*scrollBorder+scrollMarginBottom-scrollHeight-5))) {
			scrolltext.moveBy(0,scrollArrowDir*5)
			scrollbox.moveTo(0,(scrolltext.y-scrollMarginTop)/scrollFactor+scrollArrowHeight)
			setTimeout("scrollArrowSlide()",20)
		}
		else {
			if (scrollArrowDir==1) scrolltext.moveTo(scrolltext.x,scrollMarginTop)
			else if (scrollArrowDir==-1) scrolltext.moveTo(scrolltext.x,-(scrolltext.height+2*scrollBorder+scrollMarginBottom-scrollHeight))
			scrollbox.moveTo(0,(scrolltext.y-scrollMarginTop)/scrollFactor+scrollArrowHeight)
		}
	}
}

function loadSource(page) {
	scrollLoaded = 0
	if (n) document.scrollWindow.document.scrollTextWindow.src = page
	if (ie) parent.scrollTextFrame.document.location = page
}

function scrollResize() {
	scrolltext = new dynLayer("scrollTextDiv","scrollWindow.document.scrollTextWindow","scrollTextFrame")
	scrollbox = new dynLayer("scrollBoxDiv","scrollWindow.document.scrollBar")
	scrollFactor = -(scrolltext.height+scrollMarginTop+scrollMarginBottom-scrollHeight+2*scrollBorder)/(scrollBarHeight-scrollArrowHeight)
	scrollbox.moveTo(0,scrollArrowHeight)
	scrollLoaded = 1
}

// Dynamic Layer Object with width and height and frameref (for IE)
function dynLayer(id,nestref,frameref) {
	if (n) {
		if (nestref) {
			this.css = eval("document." + nestref + ".document." + id)
			this.ref = eval("document." + nestref + ".document." + id + ".document")
		}
		else {
			this.css = document.layers[id]
			this.ref = document.layers[id].document
		}
		this.x = this.css.left
		this.y = this.css.top
		this.width = this.ref.width
		this.height = this.ref.height
	}
	else if (ie) {
		if (frameref) {
			this.css = parent.frames[frameref].document.all[id].style
			this.ref = parent.frames[frameref].document
		}
		else {
			this.css = document.all[id].style
			this.ref = document
		}
		this.x = this.css.pixelLeft
		this.y = this.css.pixelTop
		this.width = this.ref.all[id].offsetWidth
		this.height = this.ref.all[id].offsetHeight
	}
	this.obj = id + "Object"
	eval(this.obj + "=this")
	this.moveBy = dynLayerMoveBy
	this.moveTo = dynLayerMoveTo
	this.show = dynLayerShow
	this.hide = dynLayerHide
}
function dynLayerMoveBy(x,y) {
	this.x += x
	this.css.left = this.x
	this.y += y
	this.css.top = this.y
}
function dynLayerMoveTo(x,y) {
	this.x = x
	this.css.left = this.x
	this.y = y
	this.css.top = this.y
}
function dynLayerShow() {
	if (n) this.css.visibility = "show"
	else if (ie) this.css.visibility = "visible"
}
function dynLayerHide() {
	if (n) this.css.visibility = "hide"
	else if (ie) this.css.visibility = "hidden"
}

//-->
</SCRIPT>
<STYLE TYPE="text/css">
#scrollBarTop {position:absolute; left:0; top:15; width:19;}
#scrollBarBottom {position:absolute; left:0; top:257; width:19;}
</STYLE>

</HEAD>

<SCRIPT LANGUAGE="JavaScript">
document.writeln('<STYLE TYPE="text/css">');
document.writeln('<\!--');
document.writeln('#scrollWindow {position:absolute; left:'+scrollLeft+'; top:'+scrollTop+'; width:'+scrollWidth+'; height:'+scrollHeight+'; clip:rect(0,'+scrollWidth+','+scrollHeight+',0);}');
document.writeln('#scrollBorderTop {position:absolute; left:0; top:0; width:'+scrollWidth+'; height:'+scrollBorder+'; clip:rect(0,'+scrollWidth+','+scrollBorder+',0); background-color:'+scrollBorderColor+'; layer-background-color:'+scrollBorderColor+';}');
document.writeln('#scrollBorderBottom {position:absolute; left:0; top:'+(scrollHeight-scrollBorder)+'; width:'+scrollWidth+'; height:'+scrollBorder+'; clip:rect(0,'+scrollWidth+','+scrollBorder+',0); background-color:'+scrollBorderColor+'; layer-background-color:'+scrollBorderColor+';}');
document.writeln('#scrollBorderLeft {position:absolute; left:0; top:0; width:'+scrollBorder+'; height:'+scrollHeight+'; clip:rect(0,'+scrollBorder+','+scrollHeight+',0); background-color:'+scrollBorderColor+'; layer-background-color:'+scrollBorderColor+';}');
document.writeln('#scrollBorderRight {position:absolute; left:'+(scrollWidth-scrollBorder)+'; top:0; width:'+scrollBorder+'; height:'+scrollHeight+'; clip:rect(0,'+scrollBorder+','+scrollHeight+',0); background-color:'+scrollBorderColor+'; layer-background-color:'+scrollBorderColor+';}');
if (ie) document.writeln('#scrollTextWindow {position:absolute; left:'+scrollBorder+'; top:'+scrollBorder+'; width:'+(scrollWidth-scrollBarWidth-2*scrollBorder)+'; height:'+(scrollHeight-2*scrollBorder)+'; clip:rect(0,'+(scrollWidth-scrollBarWidth-2*scrollBorder)+','+(scrollHeight-2*scrollBorder)+',0); background-color:'+scrollTextBGColor+'; layer-background-color:'+scrollTextBGColor+';}');
document.writeln('#scrollBar {position:absolute; left:'+(scrollWidth-scrollBarWidth-scrollBorder)+'; top:'+scrollBorder+'; width:'+scrollBarWidth+'; height:'+(scrollHeight-2*scrollBorder)+'; clip:rect(0,'+scrollBarWidth+','+(scrollHeight-2*scrollBorder)+',0); background-color:'+scrollBarColor+'; layer-background-color:'+scrollBarColor+';}');
if (scrollBoxColor=="none") document.writeln('#scrollBoxDiv {position:absolute; left:0; top:0; width:'+scrollBarWidth+'; height:'+scrollBoxHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollBoxHeight+',0);}');
else document.writeln('#scrollBoxDiv {position:absolute; left:0; top:'+scrollArrowHeight+'; width:'+scrollBarWidth+'; height:'+scrollBoxHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollBoxHeight+',0); background-color:'+scrollBoxColor+'; layer-background-color:'+scrollBoxColor+';}');
document.writeln('#scrollArrowUpDiv {position:absolute; left:0; top:0; width:'+scrollBarWidth+'; height:'+scrollArrowHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollArrowHeight+',0); background-color:'+scrollArrowColor+'; layer-background-color:'+scrollArrowColor+';}');
document.writeln('#scrollArrowDownDiv {position:absolute; left:0; top:'+(scrollHeight-2*scrollBorder-scrollArrowHeight)+'; width:'+scrollBarWidth+'; height:'+scrollArrowHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollArrowHeight+',0); background-color:'+scrollArrowColor+'; layer-background-color:'+scrollArrowColor+';}');
document.writeln('-->');
document.writeln('</STYLE>');
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
if (n) document.writeln('<LAYER NAME="scrollTextWindow" SRC="'+scrollFirstPage+'" LEFT='+scrollBorder+' TOP='+scrollBorder+' WIDTH='+(scrollWidth-scrollBarWidth-2*scrollBorder)+' HEIGHT='+(scrollHeight-2*scrollBorder)+' CLIP="0,0,'+(scrollWidth-scrollBarWidth-2*scrollBorder)+','+(scrollHeight-2*scrollBorder)+'" BGCOLOR="'+scrollTextBGColor+'"></LAYER>')
if (ie) document.writeln('<DIV ID="scrollTextWindow"><IFRAME NAME="scrollTextFrame" SRC="'+scrollFirstPage+'" WIDTH='+(scrollWidth-scrollBarWidth-2*scrollBorder)+' HEIGHT='+(scrollHeight-2*scrollBorder)+' MARGINWIDTH=0 MARGINHEIGHT=0 FRAMEBORDER="No" SCROLLING="No"></IFRAME></DIV>')
</SCRIPT>
</DIV>

</body>
</html>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]