Sitio web oficial: http://iscrolljs.com/
La estructura dom más simple de Iscroll:
<div id = "WRAPPER"> <ul> <li> ... </li> <li> ... </li> ... </ul> </div>
Inicializar iscroll
var myScroll = new Iscroll ('#wrapper', opciones);Configuración de inicializar
Inicializar el ejemplo de uso de la configuración:
var myScroll = new Iscroll ('#wrapper', {mousewheel: true, scrollbars: true});Lista de configuración:
Pertenece a | Nombre de atributo | ilustrar | valor predeterminado |
|---|---|---|---|
Biblioteca croe | opciones.usetransform | Si usar la propiedad de transformación de CSS3 | verdadero |
opciones. Usetransición | Si se debe usar la propiedad de transición de CSS3, de lo contrario, use SolicitanimationFram en su lugar | verdadero | |
opciones.hwcomiting | Si habilitar la aceleración de hardware | verdadero | |
opciones. | Si habilita el efecto de animación elástica, apague para acelerar | verdadero | |
Características básicas Características básicas | opciones. Haga clic | Si habilita el evento de clic. Se recomienda desactivar esta opción y habilitar eventos de toque personalizados (opciones.tap) | FALSO |
opciones.disableMouse | Si desactivar la detección de eventos del mouse. Si sabe en qué plataforma ejecutar, puede permitir que acelere. | FALSO | |
opciones.disablePointer | Si desactivar la detección de eventos de puntero. Si sabe en qué plataforma ejecutar, puede permitir que acelere. | FALSO | |
opciones.disableTouch | Si apagar la detección de eventos táctiles. Si sabe en qué plataforma ejecutar, puede permitir que acelere. | FALSO | |
opciones.EventPassthrough | Cuando usa el eje horizontal de IScroll para rodar, si desea usar el eje vertical del sistema para rodar y entrar en vigencia en el eje horizontal, encienda. demostración de pase de evento | FALSO | |
opciones.freescroll | Se usa principalmente cuando el desplazamiento hacia arriba, hacia abajo, izquierdo y derecho surta efecto y se puede desplazar en cualquier dirección. Demo de desplazamiento 2D | FALSO | |
opciones.keybindings | Evento clave de enlace. Enlaces de llave | FALSO | |
opciones.invertwheelDirection | Reverse la rueda del mouse. | FALSO | |
Opciones.Momentum | Si enciende la animación de inicio, apague para mejorar la eficiencia. | verdadero | |
opciones. | Si escuchar eventos de la rueda del mouse. | FALSO | |
opciones.preventDefault | Si bloquear el evento predeterminado. | verdadero | |
opciones.scrollbars | Si se debe mostrar la barra de desplazamiento predeterminada | FALSO | |
opciones.scrollx opciones.scrolly | Puede establecer si mostrar barras de desplazamiento horizontal o vertical | scrollx falso samly verdadero | |
opciones.tap | Si habilita los eventos de tap personalizados Puede personalizar el nombre del evento TAP | FALSO | |
Barra de desplazamiento Barras de desplazamiento | opciones.scrollbars | Si se debe mostrar la barra de desplazamiento predeterminada | FALSO |
opciones.fadescrollbars | Si desvanecer la barra de desplazamiento, apagarlo para acelerar | verdadero | |
opciones. InteractivesCrollBars | ¿Puede el usuario arrastrar la barra de desplazamiento? | FALSO | |
opciones.resizescrollbars | Si para arreglar el tamaño de la barra de desplazamiento, se recomienda habilitarlo al personalizar la barra de desplazamiento. | FALSO | |
opciones.shrinkscrollbars | Si reducir la barra de desplazamiento al desplazarse excede el límite de desplazamiento. 'clip': recorte la barra de desplazamiento más allá 'escala': escalar barra de desplazamiento en proporción (ocupa recursos de la CPU) Falso: sin contracción, | FALSO | |
opciones. Indicadores | Instruye cómo se debe desplazar el iscroll, la implementación subyacente de las barras de desplazamiento. | ||
opciones.indicadores.EL | Cree un contenedor para barras de desplazamiento. El primer elemento en el contenedor es el indicador. Por ejemplo: Indicadores: { El: document.getElementById ('Indicador') } Indicadores: { El: '#indicator' } | ||
Opciones.indicadores. INFORMINEOS | Si ignorar los límites del contenedor. Establecido en verdadero para establecer la velocidad de desplazamiento demostración de paralela | FALSO | |
options.indicators.listenx opciones.indicators.listeny | El indicador monitorea el desplazamiento de esa dirección, que se puede establecer en una o dos direcciones. | verdadero | |
options.indicators.speedratiox opciones.indicators.speedratioy | Velocidad del indicador en relación con la barra de desplazamiento principal | 0 | |
options.indicators.fade opciones.indicadores.interactivos opciones.indicadores.resizar opciones.indicadores.shrink | Configuraciones como barras de desplazamiento Demostración de minimap | ||
opciones.probeType | Iscroll-probe.js debe entrar en vigencia ProbeType: 1 activado cuando el desplazamiento no está ocupado ProbeType: 2 se activó cada vez al desplazarse ProbeType: 3 activados una vez por desplazamiento de píxeles | ||
Split de la página dividida | opciones.snap | Dividir automáticamente los contenedores para hacer el efecto de las linternas giratorias, etc. Opciones.snap: verdadero // dividido automáticamente según el tamaño del contenedor Opciones.snap: El // segmento según el elemento | FALSO |
Zoom zoom | opciones.zoom | Si encender el zoom Es mejor usar iscroll-zoom.js Si el aumento se borra, el contenedor de origen se puede definir como 2 veces el tamaño y luego escala (0.5) demostración de zoom | FALSO |
opciones.zoommax | Nivel máximo de zoom | 4 | |
opciones.zoommin | Nivel de zoom mínimo | 1 | |
opciones.Startzoom | Nivel de escala inicial | 1 | |
opciones.wheelaction | Acción de rodillo Establecer en 'Zoom', puede acercarse con la rueda de desplazamiento | indefinido | |
Más configuración | opciones.bindtowrapper | Si dejar de desplazarse cuando el cursor o el tacto excede el contenedor | FALSO |
opciones. | Efecto de animación elástica Efectos preestablecidos: 'cuadrático', 'circular', 'espalda', 'rebote', 'elástico' (los dos últimos no pueden expresarse a través de CSS3) También puede personalizar los efectos Bounceing: { Estilo: 'Cúbico-Bezier (0,0,1,1)', // CSS3 fn: function (k) {return k; } // Al usar requestAnimationFrame, } | 'circular' | |
opciones. | El número de milisegundos de la animación elástica dura | 600 | |
opciones. Deceleración | Desaceleración de impulso Cuanto más grande es más rápido, el precio recomendado no es más de 0.01 | 0.0006 | |
opciones. Mousewheelspeed | Velocidad de la rueda del mouse | ||
opciones.preventDefaultException | Listas qué elementos no bloquean los eventos predeterminados; | {TagName: /^(Entrada | TextAREA | Botón | Seleccionar) $ /} | |
opciones.ResizePolling | Recalcular el intervalo de tiempo de IScroll al cambiar el tamaño de la ventana | 60 | |
Enlace clave | opciones.keybindings | Escuche eventos clave para controlar iscroll Por ejemplo: KeyBindings: { PageUp: 33, Paggown: 34, Fin: 35, Inicio: 36, Izquierda: 37, Up: 38, Derecha: 39, Abajo: 40 } | |
API ISCROLL5:
Pertenece a | Nombre del método | ilustrar |
|---|---|---|
voluta | Scrollto (x, y, tiempo, relajando) | Desplácese a: x, y, evento, método de facilitación x: int Y: int Tiempo: int Evaluación: cuadrática | Circular | Atrás | rebote | elástico Vea el objeto iscroll.utils. ejemplo: myscroll.scrollto (0, -100, 1000, iscroll.utils.ease.elastic); |
Scrollby (x, y, tiempo, relajando) | Desplácese a algún lugar relativo a la posición actual El resto son los mismos que anteriores | |
ScrollToElement (El, Time, OffsetX, Offsety, Siving) | Desplácese a un elemento. El es el parámetro requerido OffSetX/Offsety: desplazamiento en relación con el elemento EL. Establecer en verdadero para ser el centro de la pantalla Desplácese al elemento | |
Split de la página dividida | gotopage (x, y, tiempo, relajando) | Divida la página de acuerdo con opciones. XY puede entrar en vigencia al mismo tiempo. Usar en combinación con opciones.snap |
próximo() Prev () | Página anterior, página siguiente Usar en combinación con opciones.snap | |
Zoom | zoom (escala, x, y, tiempo) | Recipiente de escala Escala: factor de escala |
refrescar | refrescar() | Actualizar iscroll |
destruir | destruir() | Destruir iscroll y ahorrar recursos |
Eventos de Iscroll:
beforescrollstart | El usuario hace clic en la pantalla, pero aún no se ha inicializado antes de desplazarse |
|---|---|
cañón perrutivo | Cancelar después de inicializar el desplazamiento |
desplazamiento | Empiece a desplazarse |
voluta | Desplazamiento |
desplazarse | Extremos de desplazamiento |
película | Toque la pantalla izquierda y derecha |
zoomstart | Comenzar a escalar |
zoomend | Fin de Zoom |
Ejemplo de uso del evento:
myScroll = new Iscroll ('#wrapper'); myScroll.on ('Scrollend', Dosomething);Propiedades de Iscroll:
myscroll.x/y | Ubicación actual |
|---|---|
myscroll.directionx/y | La dirección de desplazamiento de la última vez (-1 abajo/derecha, 0 permanece original, 1 arriba/izquierda) |
myScroll.CurrentPage | Información actual |
myscroll.maxscrollxmyscroll.maxscrolly | myscroll.x/y cuando se desplaza hasta el fondo |