Ejemplo
Obtener el número de píxeles que el contenido de un <div> elemento se desplaza horizontal y verticalmente:
var elmnt = document.getElementById("myDIV");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
Los conjuntos de propiedades scrollLeft o devuelve el número de píxeles contenido de un elemento se desplaza horizontalmente.
Consejo: Utilice la scrollTop propiedad para establecer o devolver el número de píxeles contenido de un elemento se desplaza verticalmente.
Consejo: Para añadir barras de desplazamiento a un elemento, utilice el CSS desbordamiento de propiedad.
Soporte del navegador
Propiedad | |||||
---|---|---|---|---|---|
scrollLeft | Sí | Sí | Sí | Sí | Sí |
Sintaxis
Devolver la propiedad scrollLeft:
element .scrollLeft
Establecer la propiedad scrollLeft:
element .scrollLeft= pixels
Valores de propiedad
Valor | Descripción |
---|---|
pixels | Especifica el número de píxeles contenido del elemento se desplaza horizontalmente. Notas especiales:
|
Detalles técnicos
Valor de retorno: | Un número, que representa el número de píxeles que el contenido del elemento se ha desplazado horizontalmente |
---|
Más ejemplos
Ejemplo
Desplazar el contenido de un <div> elemento A 50 píxeles horizontalmente y 10 pixeles verticalmente:
var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft = 50;
elmnt.scrollTop = 10;
Inténtalo tú mismo " Ejemplo
Desplazar el contenido de un <div> elemento en un 50 píxeles horizontalmente y 10 pixeles verticalmente:
var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft
+= 50;
elmnt.scrollTop += 10;
Inténtalo tú mismo " Ejemplo
Desplazar el contenido de <body> por 30 píxeles horizontalmente y 10 pixeles verticalmente:
var body = document.body; // For Chrome, Safari and Opera
var html = document.documentElement; // Firefox and IE places the overflow at the
<html> level, unless else is specified. Therefore, we use the
documentElement property for these two browsers
body.scrollLeft += 30;
body.scrollTop += 10;
html.scrollLeft += 30;
html.scrollTop += 10;
Inténtalo tú mismo "