Site oficial: http://iscrolljs.com/
A estrutura DOM mais simples de Iscroll:
<div id = "wrapper"> <ul> <li> ... </li> <li> ... </li> ... </ul> </div>
Inicialize o ISCROLL
var myScroll = new IsCroll ('#wrapper', opções);Inicialize as configurações
Inicialize o exemplo de uso de configurações:
var myScroll = new Iscroll ('#wrapper', {Mousewheel: true, scrollbars: true});Lista de configurações:
Pertence a | Nome do atributo | ilustrar | valor padrão |
|---|---|---|---|
Biblioteca Core Croe | options.UseTransform | Se deve usar a propriedade de transformação do CSS3 | verdadeiro |
options.Usetransition | Se deve usar a propriedade de transição do CSS3, use requestanimationfram | verdadeiro | |
options.hwcompositando | Se deve habilitar a aceleração de hardware | verdadeiro | |
options.bounce | Se deve habilitar o efeito de animação elástica, desligue -se para acelerar | verdadeiro | |
Recursos básicos Recursos básicos | options.Click | Se deve habilitar o evento de clique. Recomenda -se desativar esta opção e ativar eventos de toque personalizados (options.tap) | falso |
options.DisableMouse | Se você deve desativar a detecção de eventos do mouse. Se você souber em qual plataforma funcionar, pode permitir que ela acelere. | falso | |
options.disablePointer | Se você deve desativar a detecção de eventos de ponteiro. Se você souber em qual plataforma funcionar, pode permitir que ela acelere. | falso | |
options.disableTouch | Se você deve desativar a detecção de eventos de toque. Se você souber em qual plataforma funcionar, pode permitir que ela acelere. | falso | |
options.EventPassThthrough | Ao usar o eixo horizontal do ISCROLL para rolar, se você deseja usar o eixo vertical do sistema para rolar e entrar em vigor no eixo horizontal, ligue. Demonstração de Passagem do Evento | falso | |
options.freescroll | É usado principalmente quando ambos, para baixo, a rolagem esquerda e direita entra em vigor e podem ser rolados em qualquer direção. Demoção de rolagem 2D | falso | |
options.KeyBindings | Vincular o evento -chave. Chaves de ligação | falso | |
options.invertwheeldirection | Roda reversa do mouse. | falso | |
options.MomEntum | Seja para ativar a animação de inicialização, desligue -a para melhorar a eficiência. | verdadeiro | |
Options.mousewheel | Se deve ouvir os eventos da roda do mouse. | falso | |
options.preventDefault | Se deve bloquear o evento padrão. | verdadeiro | |
options.ScrollBars | Se deve exibir a barra de rolagem padrão | falso | |
options.scrollx options.Scrolly | Você pode definir se deve exibir barras de rolagem horizontal ou vertical | scrollx false Scrolly True | |
options.tap | Se deve habilitar eventos de toque personalizados Você pode personalizar o nome do evento TAP | falso | |
Barra de rolagem Barras de rolagem | options.ScrollBars | Se deve exibir a barra de rolagem padrão | falso |
options.fadeScrollBars | Se deve desaparecer a barra de rolagem, desligue -a para acelerar | verdadeiro | |
options.InterActiveScrollBars | O usuário pode arrastar a barra de rolagem | falso | |
options.ResizesCrollBars | Seja para corrigir o tamanho da barra de rolagem, é recomendável ativá -lo ao personalizar a barra de rolagem. | falso | |
options.shrinkscrollBars | Se deve encolher a barra de rolagem quando a rolagem excede o limite de rolagem. 'clipe': corte a barra de rolagem além 'Escala': Scaling Scrollbar em proporção (ocupa recursos da CPU) Falso: Sem encolhimento, | falso | |
options.indicadores | Instrui como o ISCROLL deve ser rolado, a implementação subjacente das barras de rolagem. | ||
options.indicators.el | Crie um recipiente para barras de rolagem. O primeiro elemento no contêiner é o indicador. Por exemplo: Indicadores: { El: document.getElementById ('Indicador') } Indicadores: { El: '#indicator' } | ||
options.Indicators.IGNOREBOUNDES | Se deve ignorar os limites dos contêineres. Defina como true para definir a velocidade de rolagem Demo de Parallelax | falso | |
options.indicators.listenx options.indicators.Listeny | O indicador monitora a rolagem dessa direção, que pode ser definida como uma direção ou duas direções. | verdadeiro | |
options.indicators.speedRatiox options.indicators.speedratioy | Velocidade do indicador em relação à barra de rolagem principal | 0 | |
options.indicators.fade options.indicators.interactive options.indicators.Resize options.indicators.shrink | Configurações como barras de rolagem Minimap Demo | ||
options.probetype | Iscroll-probe.js é necessário para entrar em vigor Probotipo: 1 acionado quando a rolagem não está ocupada Probotype: 2 acionou cada vez que a rolagem Probtipo: 3 acionado uma vez por rolagem de pixels | ||
Página dividida Snap | options.snap | Dividir automaticamente recipientes para obter o efeito das lanternas giratórias, etc. Options.snap: true // dividido automaticamente de acordo com o tamanho do contêiner Options.snap: el // segmento de acordo com o elemento | falso |
Zoom zoom | options.zoom | Se deve ligar o zoom É melhor usar o ISCROLL-ZOOM.JS Se a ampliação estiver borrada, o contêiner de origem poderá ser definido como 2 vezes o tamanho e depois a escala (0,5) demonstração de zoom | falso |
options.zoommax | Nível máximo de zoom | 4 | |
options.zoommin | Nível mínimo de zoom | 1 | |
options.startzoom | Nível inicial de escala | 1 | |
opções.weelaction | Ação do rolo Definido como 'zoom', você pode aumentar o zoom com a roda de rolagem | indefinido | |
Mais configurações | options.bindtowrapper | Se deve parar de rolar quando o cursor ou o toque excede o contêiner | falso |
options.bounceing | Efeito de animação elástica Efeitos predefinidos: 'quadrático', 'circular', 'back', 'bounce', 'elástico' (os dois últimos não podem ser expressos através do CSS3) Você também pode personalizar os efeitos Bounceing: { Estilo: 'cubic-bezier (0,0,1,1)', // css3 fn: function (k) {return k; } // Ao usar o requestanimationframe, } | 'circular' | |
options.bouncetime | O número de milissegundos de animação elástica dura | 600 | |
options.deceleração | Desaceleração do momento do rolamento Quanto maior o mais rápido, o preço recomendado não é superior a 0,01 | 0,0006 | |
options.mousewheelspeed | Velocidade da roda do mouse | ||
options.PreventDefaultException | Listas quais elementos não bloqueiam eventos padrão; | {tagname: /^(input | textarea | botão | selecione) $ /} | |
options.ResizEpolling | Recalcule o intervalo de tempo do ISCroll ao redimensionar a janela | 60 | |
Chave de ligação | options.KeyBindings | Ouça os principais eventos para controlar o ISCROLL Por exemplo: Keybindings: { Página: 33, Pagewn: 34, Fim: 35, Home: 36, Esquerda: 37, UP: 38, Direita: 39, Down: 40 } | |
API ISCROLL5:
Pertence a | Nome do método | ilustrar |
|---|---|---|
Role | Scrollto (x, y, tempo, flexibilização) | Role para: x, y, evento, método de flexibilização x: int y: int Tempo: int Efaching: quadrático | circular | traseiro | Bounce | elástico Veja o objeto IsCroll.utils.ase exemplo: myScroll.ScrollTo (0, -100, 1000, iscroll.utils.ease.eltical); |
scrollby (x, y, tempo, flexibilização) | Role para algum lugar em relação à posição atual O resto é o mesmo que acima | |
ScrollToElement (El, Time, Offsetx, Offsety, Faciling) | Role para um elemento. El é o parâmetro necessário offsetx/offsety: deslocamento em relação ao elemento EL. Definido como true como o centro da tela Role até o elemento | |
Página dividida Snap | GOTOPAGE (x, y, tempo, flexibilização) | Divida a página de acordo com o Options.snap e pule para uma página em paisagem ou retrato. XY pode entrar em vigor ao mesmo tempo. Use em combinação com opções.snap |
próximo() prev () | Página anterior, próxima página Use em combinação com opções.snap | |
Zoom | zoom (escala, x, y, tempo) | Contêiner de escala Escala: fator de escala |
Atualizar | Refresh () | Atualizar o ISCROLL |
destruir | destruir() | Destrua o ISCROLL e salve recursos |
Eventos IsCroll:
beforescrollstart | O usuário clica na tela, mas ainda não foi inicializado antes de rolar |
|---|---|
ScrollCancel | Cancelar depois de inicializar a rolagem |
ScrollStart | Comece a rolar |
Role | Rolando |
Scrollend | Ends de rolagem |
Flick | Toque na tela esquerda e direita |
Zoomstart | Comece a escalar |
zoomend | Fim do zoom |
Exemplo de uso de eventos:
myScroll = new IsCroll ('#wrapper'); myscroll.on ('Scrollend', Dosomething);Propriedades de Iscroll:
myscroll.x/y | Localização atual |
|---|---|
myscroll.directionx/y | A direção de rolagem da última vez (-1 para baixo/direita, 0 permanece original, 1 para cima/esquerda) |
myscroll.currentpage | Informações sobre o SNAP atual |
myscroll.maxscrollxMyScroll.MaxScrolly | myscroll.x/y Ao rolar para o fundo |