20/11/2013, 16:38
|
 | Colaborador | | Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses Puntos: 1012 | |
| Respuesta: [APORTE] efectos sin jquery
Emular textarea (scrolear verticalmente un div) ----> compatibilidad : todos los navegadores modernos incluido ie8
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}
html, body {
width: 100%;
height: 100%;
}
.margenes {
width: 300px;
height: 30%;
margin: 0px auto;
padding: 10px 0 10px 10px;
border: 1px solid rgb(65, 51, 51);
background-color: rgb(61, 61, 51);
}
.contenedor {
height: 100%;
color: rgb(255, 255, 255);
background-color: rgb(61, 61, 51);
}
.scrollbar {
/*position: relative;*/
float: right;
width: 11px;
display: none;
}
.carril {
position: absolute;
left: 0;
top: 0;
width: 11px;
background-color: rgb(80, 69, 71);
border-radius: 1em;
}
.barra {
position: absolute;
left: 1px;
top: 1px;
width: 9px;
height: 0;
background-color: rgb(206, 206, 214);
border-radius: 1em;
}
.barra:hover {
cursor: auto;
}
.txtarea {
width: 289px; /* width de .margenes - width de .carril */
height: 100%;
overflow: hidden;
}
.valorTxtarea {
position: absolute;
font-size: 17px;
padding-right: 10px; /* el mismo padding-right que el padding asignado en .margenes */
}
</style>
<script type="text/javascript">
var lib = {
Evento : function(elemento, nomevento, fnc) {
if (elemento.addEventListener) {
elemento.addEventListener(nomevento, fnc, false);
} else if (elemento.attachEvent) {
elemento.attachEvent('on' + nomevento, fnc);
}
},
EventoEliminar : function(elemento, nomevento, fnc) {
if (elemento.removeEventListener) {
elemento.removeEventListener(nomevento, fnc, false);
} else if (elemento.detachEvent) {
elemento.detachEvent('on' + nomevento, fnc);
}
},
cssComputado : function(obj, styleProp) {
if (window.getComputedStyle) {
var valor = window.getComputedStyle(obj, null)[styleProp];
} else if (obj.currentStyle) {
var valor = obj.currentStyle[styleProp];
}
return valor;
},
EventoCancelar : function(evt) {
var evt = evt || window.event;
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
},
EventoParar : function(evt) {
var evt = evt || window.event;
if (evt.stopPropagation) {
evt.stopPropagation();
} else {
evt.cancelBubble = true;
}
},
posicionAbsolutaElemento : function(elem) {
var y = 0;
while (elem.offsetParent) {
y += elem.offsetTop;
elem = elem.offsetParent;
}
return {top : y};
},
}
var scrollDiv = {
init : function() {
for (var i = 0, obj = document.querySelectorAll('.contenedor'); i < obj.length; i++) {
scrollDiv.contenedor.push(obj[i]);
scrollDiv.scroll_bar.push(document.querySelectorAll('.scrollbar')[i]);
scrollDiv.track.push(document.querySelectorAll('.carril')[i]);
scrollDiv.bar.push(document.querySelectorAll('.barra')[i]);
scrollDiv.tArea.push(document.querySelectorAll('.txtarea')[i]);
scrollDiv.vTxt.push(document.querySelectorAll('.valorTxtarea')[i]);
scrollDiv.barraScroll(i);
}
},
contenedor: [],
scroll_bar: [],
track: [],
bar: [],
tArea: [],
vTxt: [],
arrastrar: [],
flechas: [],
mouseupDocument: [],
barraScroll : function(indice) {
if (scrollDiv.vTxt[indice].offsetHeight <= scrollDiv.tArea[indice].offsetHeight) {
return false;
} else {
function altoBarra(p) {
if (p >= 9) {
return 0.2;
} else {
return {
1: 0.9,
2: 0.8,
3: 0.7,
4: 0.6,
5: 0.5,
6: 0.4,
7: 0.3,
8: 0.2
} [p];
}
}
var cont_Comp = scrollDiv.tArea[indice].offsetHeight;
var vTxt_Comp = scrollDiv.vTxt[indice].offsetHeight;
scrollDiv.scroll_bar[indice].style.height = cont_Comp + 'px';
var trackH = cont_Comp;
scrollDiv.track[indice].style.height = trackH + 'px';
var barH = parseInt(cont_Comp * altoBarra(parseInt(vTxt_Comp / cont_Comp)));
scrollDiv.bar[indice].style.height = barH + 'px';
var offset1 = {}, offset2 = {};
var alto_cont = vTxt_Comp - cont_Comp;
var largoCarril = trackH - barH;
var vTxtTop = 0;
var barraTop = 0;
scrollDiv.scroll_bar[indice].style.display = 'inline';
// FLECHAS
lib.Evento(scrollDiv.tArea[indice], 'click', function(evt) {
lib.EventoCancelar(evt);
lib.EventoParar(evt);
lib.Evento(document.body, 'keydown', scrollDiv.flechas[indice]);
lib.Evento(document, 'mouseup', scrollDiv.mouseupDocument[indice]);
});
scrollDiv.flechas[indice] = function(evt) {
var keyCode = (evt) ? evt.keyCode : event.charCode;
if (keyCode == 40) {
vTxtTop = parseInt(vTxtTop - 20);
} else if (keyCode == 38) {
vTxtTop = parseInt(vTxtTop + 20);
} else {
return false;
}
lib.EventoCancelar(evt);
lib.EventoParar(evt);
vTxtTop = (Math.abs(vTxtTop) > alto_cont) ? -alto_cont : vTxtTop;
vTxtTop = (vTxtTop <= 0) ? vTxtTop : 0;
scrollDiv.bar[indice].style.top = Math.ceil(((Math.abs(vTxtTop) * (trackH - barH)) / alto_cont)) + 'px';
scrollDiv.vTxt[indice].style.top = vTxtTop + 'px';
}
// FLECHAS
// RUEDA
lib.Evento(scrollDiv.contenedor[indice], 'mousewheel', function(event) {ratonScroll(event)});
lib.Evento(scrollDiv.contenedor[indice], 'DOMMouseScroll', function(event) {ratonScroll(event)});
function ratonScroll(evt) {
var roll = (evt.wheelDelta) ? evt.wheelDelta : parseInt(-30 * evt.detail);
vTxtTop = (roll > 0) ? parseInt(vTxtTop + 20) : parseInt(vTxtTop - 20);
vTxtTop = (Math.abs(vTxtTop) > alto_cont) ? -alto_cont : vTxtTop;
vTxtTop = (vTxtTop <= 0) ? vTxtTop : 0;
scrollDiv.bar[indice].style.top = Math.ceil(((Math.abs(vTxtTop) * (trackH - barH)) / alto_cont)) + 'px';
scrollDiv.vTxt[indice].style.top = vTxtTop + 'px';
lib.EventoCancelar(evt);
lib.EventoParar(evt);
}
// RUEDA
// PULSACIÓN en scroll track
lib.Evento(scrollDiv.track[indice], 'mousedown', function(evt) {
lib.Evento(document, 'mouseup', scrollDiv.mouseupDocument[indice]);
var evto = (evt.target) ? evt.target : window.event.srcElement;
var posElemento = lib.posicionAbsolutaElemento(this);
var posicionInicialTop = parseInt(posElemento.top);
barraTop = parseInt(lib.cssComputado(scrollDiv.bar[indice], 'top'));
if (evto.parentNode.className == scrollDiv.scroll_bar[indice].className) {
var posev = (evt.pageY) ? evt.pageY : window.event.clientY;
var barArriba = parseInt((posev - posicionInicialTop));
var barAbajo = parseInt(barArriba - barH);
(function desliza(barraTop) {
vTxtTop = -((barraTop * alto_cont) / largoCarril);
setTimeout(function() {
if (barraTop <= barAbajo) {
scrollDiv.bar[indice].style.top = barraTop + 'px';
scrollDiv.vTxt[indice].style.top = vTxtTop + 'px';
barraTop += 10;
desliza(barraTop);
} else if (barraTop >= barArriba) {
scrollDiv.bar[indice].style.top = barraTop + 'px';
scrollDiv.vTxt[indice].style.top = vTxtTop + 'px';
barraTop -= 10;
desliza(barraTop);
}
}, 30);
})(barraTop);
}
});
// PULSACIÓN en scroll track
Continua en el siguiente post
Última edición por IsaBelM; 25/08/2014 a las 15:12
Razón: nueva versión
|