This page has been robot translated, sorry for typos if any. Original content here.

JScrollPane Faire un beau défilement

Malgré le fait que le réseau regorge de recommandations pour ne pas changer l'apparence habituelle des contrôles de l'utilisateur, il faut souvent faire face au désir du client de voir une barre de défilement inhabituelle, belle et parfois juste repeinte sur son site.

Par exemple, ceci:

Défi

Implémentez une barre de défilement verticale qui répond aux exigences suivantes:

    * respect de la conception;
    * compatibilité multi-navigateur;
    * La possibilité de faire défiler avec la molette de la souris.

Solution

Nous ne réinventerons pas la roue, heureusement les gens intelligents ont déjà travaillé pour nous. Nous utilisons le plugin gratuit jScrollPane - il répond pleinement aux exigences ci-dessus.

Avec lui, vous pouvez faire un tel défilement ou comme ça.

Enregistré:

    * IE 6-8 * Firefox 3 * Opera 9.5-10 * Safari 3

Pour quelques-uns, vous pouvez voir d'autres exemples sur la page officielle du plugin.

Que télécharger?

Démarrage rapide

Nous connectons des bibliothèques et n'oublions pas 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éez 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, nous définissons la conception du conteneur:

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

Définissez des styles à partir de jScrollPane.css et dessinez des images (plus d'informations ci-dessous).

La dernière étape consiste à 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>

Et maintenant sur tout plus en détail

Plus sur HTML

Dans l'exemple ci-dessus, deux conteneurs sont créés: scroll-pane et scrollBox, mais en réalité seul scroll-pane est utilisé. Pourquoi ai-je besoin d'un conteneur scrollBox externe? Il est utile pour positionner la zone de défilement, car le positionnement du volet de défilement lui-même est assez difficile, car le script l'enveloppera également avec son propre conteneur. De manière générale, l'utilisation d'un div externe (nous avons scrollBox) pour le positionnement est un conseil du site officiel du plugin.

Plus sur CSS

L'analyse détaillée promise de jScrollPane.css:

<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>

Plus sur js

Deux fonctions sont définies:

jScrollPane initialise le défilement, selon les paramètres spécifiés (voir le tableau ci-dessous pour une liste).
jScrollPaneRemove «Désinitialisation» - supprime le parchemin élégant et restaure celui standard.

Paramètres JScrollPane ()

Nom de la fonction Description de la fonction Type de données
scrollbarWidth Largeur de la barre de défilement personnalisée en pixels. La valeur par défaut est 10. int
scrollbarMargin retraits à gauche de la barre de défilement en pixels. La valeur par défaut est 5 int
wheelSpeed indique la vitesse à laquelle la molette de la souris fait défiler le contenu en pixels. La valeur par défaut est 18 int
showArrows indique s'il faut afficher les flèches sur la barre de défilement. La valeur par défaut est false. booléen
flècheTaille hauteur de flèche si showArrows = true (si non défini, calculé à partir de CSS) int
animateTo si une animation est nécessaire lors de l'appel de 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 est 0. int
animateInterval Intervalle, en millisecondes, de mise à jour de l'animation scrollPane. La valeur par défaut est 100. int
animateStep Distance parcourue par le curseur en une seule étape d'animation. La valeur par défaut est 3 int
maintenirPosition Si vous souhaitez que la barre de défilement conserve sa position lors de la réinitialisation, elle ne défilera pas lors de l'ajout de contenu. La valeur par défaut est true. booléen
scrollbarOnLeft Spécifie 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 Indique si le script doit être réinitialisé automatiquement lors du chargement des images dans le contenu. La valeur par défaut est false. booléen

Un peu sur la dynamique

Si la largeur (hauteur) du défilement change dynamiquement, vous devez appeler les fonctions jScrollPaneRemove et jScrollPane en séquence.

Supposons que nous ayons ce CSS:

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

Le script modifie la largeur de la scrollBox, modifiant ainsi automatiquement la largeur de .scroll-pane:

<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

Vérifié

    * IE 6-8 * Firefox 3 * Opera 9.5-10 * Safari 3

Nuance de la molette de la souris

JScrollPane a une fonctionnalité intéressante. Si vous faites défiler le défilement avec la molette de la souris, puis après que tout le contenu du conteneur a été défilé, la barre de défilement principale de la page commence à tourner (bien sûr, s'il y en a un).

A en juger par le code jScrollPane.js, cela a été fait exprès (ce qui signifie que ce n'est pas un bug mais une fonctionnalité). Mais si cette fonctionnalité interfère, elle peut facilement être désactivée.

Nous montons dans le code jScrollPane.js et y trouvons les lignes:

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

Modifier le retour! DragOccured; au retour faux;

C’est tout! Maintenant, la roue se comporte de manière plus logique et ne contrôlera pas le défilement principal de la page jusqu'à ce que le curseur de la souris quitte le conteneur.

Défilement jusqu'à la position souhaitée (mise à jour 1.08.10)

Parfois, vous devez immédiatement (ou par une action) faire défiler un bloc avec un tel défilement jusqu'à une certaine position. Pour cela, le plugin a deux fonctions (pour une raison mal décrite):

scrollTo - pour faire défiler le contenu jusqu'à la position spécifiée. La position peut être spécifiée en px (compter à partir de la bordure supérieure de ce bloc de défilement lui-même) ou spécifier id - le bloc défilera jusqu'à l'élément avec l'id spécifié

scrollBy - fait défiler le bloc du nombre de pixels spécifié par rapport à la position actuelle

Les fonctions s'accrochent au bloc sur lequel l'initialisation du défilement a été suspendue.

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

Veuillez noter que "[0]" est un must. Je ne sais pas pourquoi c'est (pour ceux qui veulent apprendre à creuser le code du plugin), mais cela ne fonctionne pas sans lui.

Avantages:

    * Fonctionne correctement dans tous les navigateurs populaires;
    * vous permet de personnaliser de manière flexible l'apparence et le comportement du parchemin;
    * faites défiler avec la molette de la souris.

Moins:

    * Défilement horizontal non implémenté.