JScrollPane. Faire un beau défilement

Malgré le fait que le Web est plein de recommandations ne changent pas l'utilisateur habituelle pour afficher les contrôleurs, ont de plus en plus pour faire face à la volonté du client de voir sur le site scrollbar inhabituel, beau, et parfois tout simplement repeint.

Par exemple, comme suit:

tâche

Mettre en place une barre de défilement vertical, répond aux exigences suivantes:

    * Le respect de la conception;
    * Compatibilité inter-navigateur;
    * La possibilité de faire défiler la molette de la souris.

décision

Nous allons pas réinventer la roue, au profit des gens intelligents ont travaillé pour nous. Utilisez gratuitement plugin JScrollPane - il répond parfaitement à ces exigences.

Avec elle, vous pouvez le faire ici est un parchemin ou ici tel.

Testé:

    * IE 6-8 * Firefox 3 * Opera 9,5-10 * Safari 3

Ce petit, vous pouvez voir d' autres exemples sur la page officielle du plugin.

Qu'est-ce que le rock?

démarrage rapide

Connectez la bibliothèque et ne pas oublier CSS:

<code>&lt;link type=text/css rel=stylesheet href=css/jScrollPane.css /&gt;&lt;script type=text/javascript src=js/jquery-1.4.2.min.js&gt;&lt;/script&gt;&lt;script type=text/javascript src=js/jquery.mousewheel.min.js&gt;&lt;/script&gt;&lt;script type=text/javascript src=js/jScrollPane.js&gt;&lt;/script&gt;</code>

Créer un conteneur HTML pour le défilement:

<code>&lt;div class=scrollBox&gt;&lt;div id=pane class=scroll-pane&gt;Хочу себе необычный скролл! &lt;/div&gt;&lt;/div&gt;</code>

En CSS, une conception de conteneurs:

<code>.scroll-pane { width: 700px; /* Ширина видимой области*/ height: 275px; /* Высота видимой области*/ overflow: auto; /* Если отключены скрипты это правило позволит отобразить обычный скролл */ }</code>

styles personnalisables de jScrollPane.css et de dessiner des images (voir plus bas).

La dernière étape - initialiser le script de défilement:

<code>&lt;script type=text/javascript&gt;jQuery(function() { jQuery('#pane').jScrollPane({scrollbarWidth:18, showArrows:true}); }); &lt;/script&gt;</code>

Maintenant, tous les détails

En savoir plus sur HTML

Dans l'exemple ci-dessus crée deux conteneurs: rouleau-vitrage et Scrollbox, et effectivement utilisés seulement scroll-volet. Ce qui est nécessaire est un conteneur Scrollbox externe? Il est utile pour le positionnement d'une zone de défilement, de se positionner comme le défilement volet assez difficile, parce que le script se terminera et encore son propre conteneur. D'une manière générale, utiliser un divas externes (nous Scrollbox) à la position - ce qui est l'avis du site officiel de plugin.

En savoir plus sur CSS

La promesse d'une analyse jScrollPane.css détaillée:

<code>.jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1; } /* Трек - полоса по которой бегает ползунок */ .jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%; background: url(../images/scrollTrak.gif) repeat-y; /* задаем фоновую картинку или просто цвет фона */ } /* Средняя часть ползунка (резиновая, т.к. ползунок меняет высоту в зависимости от количества содержимого) */ .jScrollPaneDrag { position: absolute; background: url(../images/scrollDrag.gif) repeat-y; /* задаем фоновую картинку или просто цвет фона */ cursor: pointer; overflow: hidden; left:1px; } /* верхушка ползунка (можно задать height:0, если ползунок не имеет выраженной верхушки) */ .jScrollPaneDragTop { position: absolute; top: 0; left: 0; overflow: hidden; background: url(../images/scrollDragTop.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */ height:3px; /* высота верхушки */ } /* низ ползунка (можно задать height:0, если ползунок не имеет выраженного низа) */ .jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden; background: url(../images/scrollDragBot.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */ height:3px; /* высота низа */ } /* стрелка вверх (правило можно исключить, если скролл по дизайну без стрелок) */ a.jScrollArrowUp { display: block; position: absolute; z-index: 1; top: 0; right: 0; text-indent: -2000px; overflow: hidden; height: 18px; /* высота стрелки (ширина определяется шириной скролла при инициализации скрипта) */ background: url(../images/arrow_up.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */ } /* стрелка ввниз (правило можно исключить, если скролл по дизайну без стрелок)*/ a.jScrollArrowDown { display: block; position: absolute; z-index: 1; bottom: 0; right: 0; text-indent: -2000px; overflow: hidden; height: 18px; /* высота стрелки (ширина определяется шириной скролла при инициализации скрипта) */ background: url(../images/arrow_down.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */ }</code>

En savoir plus sur js

Défini deux fonctions:

JScrollPane initialise le défilement en fonction des paramètres définis (voir la liste. dans le tableau ci-dessous).
jScrollPaneRemove "Désinitialisation" - un parchemin élégant supprime et restaure la norme.

Prarametry JScrollPane ()

nom de la fonction fonction description type de données
scrollbarWidth largeur nonstandard scrollbar en pixels. La valeur par défaut est 10 int
scrollbarMargin indentation sur la gauche de la barre de défilement, en pixels. La valeur par défaut est 5 int
wheelSpeed Il indique à quelle vitesse la molette de la souris pour faire défiler à rendre le contenu en pixels. La valeur par défaut est 18 int
showArrows Indique si vous souhaitez afficher la flèche sur la barre de défilement. La valeur par défaut est false booléen
arrowSize la hauteur du tireur si showArrows = true (si non spécifié, est calculé à partir de la CSS) int
animateTo si l'animation est nécessaire lors de l'appel scrollTo et scrollBy. La valeur par défaut est false booléen
dragMinHeight la hauteur minimale à laquelle vous pouvez faire glisser le curseur. La valeur par défaut 0 int
animateInterval Intervalle en millisecondes pour mettre à jour le scrollpane d'animation. La valeur par défaut est de 100 int
animateStep Distance parcourue par le curseur d'une animation étape. La valeur par défaut est 3 int
maintainPosition Si vous voulez que la barre de défilement maintient sa position lors d'une remise à zéro, alors il ne défile pas avec l'ajout de plus de contenu. La valeur par défaut est true booléen
scrollbarOnLeft Il précise que la barre de défilement doit apparaître à gauche du contenu (assurez-vous que le CSS reflète également ce point) booléen
reinitialiseOnImageLoad Si le script réinitialise automatiquement lorsque télécharger des images dans le contenu. La valeur par défaut est false booléen

Un peu sur la dynamique de

Si la largeur (hauteur) change de défilement dynamique, vous devez appeler la fonction cohérente et jScrollPaneRemove JScrollPane.

Supposons que nous ayons un CSS:

<code>.scrollBox{ width:200px; } .scroll-pane { width: 100%; height: 100px; overflow: auto; }</code>

Le script modifie la largeur Scrollbox, changeant ainsi automatiquement le .scroll volet largeur:

<code>&lt;script type=text/javascript&gt;jQuery('#more').click(function() { jQuery('.scrollBox').css('width','300px'); jQuery('#pane').jScrollPaneRemove(); jQuery('#pane').jScrollPane({scrollbarWidth:18, showArrows:true}); }); &lt;/script&gt;</code>

exemple de démonstration

à carreaux

    * IE 6-8 * Firefox 3 * Opera 9,5-10 * Safari 3

Nuance défilement de la molette de la souris

Dans JScrollPane il y a une caractéristique intéressante. Si vous tournez la molette de défilement de la souris, puis après tout le contenu de la proskrollitsya de conteneur, il commence à tourner la page scrollbar principale (bien sûr le cas échéant).

A en juger par les jScrollPane.js de code, il est fait sur le but (et est donc pas un bug mais une caractéristique). Mais si cette fonction empêche, il peut facilement être désactivé.

Nous montons dans le code jScrollPane.js et trouver la ligne il y a:

<code>$container.bind( 'mousewheel', function (event, delta) { ...тра-та-та многабукофф... return !dragOccured; } );</code>

Changer le retour dragOccured !; à return false;

Tout! Maintenant, la roue se comporte plus logique et ne fonctionne pas la page défile principale jusqu'à ce que le curseur de la souris ne va pas au-delà des limites du conteneur.

Faites défiler jusqu'à la position désirée (mise à jour 08/01/10)

Parfois, il est nécessaire immédiatement (ou sur une action) pour faire défiler un bloc avec le défilement à une certaine position. Pour ce plug-in a deux (pourquoi quelque chose mal décrit) caractéristiques:

scrollTo - faire défiler le contenu à la position spécifiée. La position peut être spécifiée en px (vue de la limite supérieure de ce même bloc avec défilement) ou un ensemble id - Scroll de bloc à l'élément avec l'id spécifié

scrollBy - unité de défilement pour un nombre déterminé de pixels à partir de la position actuelle

Fonctions accrocher au bloc sur lequel pendait le défilement d'initialisation.

<code>&lt;script type=text/javascript&gt;jQuery('#pane').jScrollPane({scrollbarWidth:18, showArrows:true}); jQuery('#pane')[0].scrollTo(500); &lt;/script&gt;</code>

Permettez-moi de noter que "[0]" - est nécessaire. Qu'est-ce qu'il est - je ne sais pas (qui veulent apprendre à creuser le code de plugin), mais sans que cela ne fonctionne pas.

avantages:

    * Fonctionne adéquatement dans tous les navigateurs populaires;
    * Il permet la flexibilité de personnaliser l'apparence et le comportement de la spirale;
    * Pour faire défiler la molette de la souris.

Moins:

    * Non implémenté le défilement horizontal.