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

JScrollPane. Faites du beau défilement

Malgré le fait que le réseau déborde de recommandations pour ne pas changer le type habituel de contrôleurs, il est de plus en plus nécessaire de rencontrer le désir du client de voir sur son site un scrollbar inhabituel, beau et parfois simplement repeint.

Par exemple, ceci:

Objectif

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

    * conformité à la conception;
    * Compatibilité entre les navigateurs
    * la possibilité de faire défiler avec la molette de la souris.

La solution

Nous ne réinventerons pas la roue, les bonnes personnes ont déjà travaillé pour nous. Nous utilisons le plug-in gratuit jScrollPane - il répond entièrement aux exigences listées.

Avec son aide, vous pouvez faire un tel parchemin ou cela.

Arrivée:

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

À qui cela ne suffit pas, il est possible de regarder d'autres exemples sur une page officielle d'un plug-in.

Que faire du rock?

Démarrage rapide

Nous connectons les bibliothèques et n'oublions pas les 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, nous configurons la conception du conteneur:

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

Customisez les styles de jScrollPane.css et dessinez des images (plus sur ceci ci-dessous).

La dernière étape consiste à initialiser le script avec le script:

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

Et maintenant à propos de tout en détail

En savoir plus sur HTML

Dans l'exemple ci-dessus, deux conteneurs sont créés: scroll-pane et scrollBox, et seul scroll-pane est réellement utilisé. Pourquoi ai-je besoin d'une scrollbox externe? Il est utile pour positionner la zone de défilement, car il est plutôt difficile de positionner le volet de défilement lui-même, car le script l'entourera de son propre conteneur. En règle générale, l'utilisation d'une diva externe (nous avons une scrollBox) pour le positionnement est une astuce du site officiel du plugin.

En savoir plus sur CSS

Une analyse détaillée et détaillée 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 d'informations sur js

Deux fonctions sont définies:

jScrollPane initialise le défilement en fonction des paramètres spécifiés (voir le tableau ci-dessous pour une liste).
jScrollPaneRemove "Désinitialisation" - supprime le défilement élégant et restaure la norme.

JScrollPane ()

Nom de la fonction Description de la fonction Type de données
scrollbarWidth la largeur de la barre de défilement personnalisée en pixels. La valeur par défaut est 10 int
scrollbarMargin Indente à gauche de la barre de défilement en pixels. La valeur par défaut est 5 int
wheelSpeed Indique à quelle vitesse la molette de la souris fera 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
arrowSize flèches de hauteur si showArrows = true (si non spécifié, calculé à partir de CSS) int
animer Si l'animation est nécessaire à un 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 est 0 int
animerInterval L'intervalle en millisecondes pour la mise à jour de l'animation scrollPane. La valeur par défaut est 100 int
animateStep La distance parcourue par le curseur dans une étape de l'animation. La valeur par défaut est 3 int
maintainPosition Si vous souhaitez que la barre de défilement conserve sa position lors de sa réinitialisation, elle ne défilera pas lorsque vous ajouterez du 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 CSS reflète également ce point) booléen
réinitialiserOnImageLoad Le script doit-il être réinitialisé automatiquement lorsque des images sont chargées dans le contenu? La valeur par défaut est false. booléen

Un peu sur la dynamique

Dans le cas où la largeur (hauteur) du défilement change dynamiquement, il est nécessaire d'appeler séquentiellement les fonctions jScrollPaneRemove et jScrollPane.

Supposons que nous ayons ce CSS:

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

Le script modifie la largeur du scrollBox, modifiant ainsi automatiquement la largeur du volet .scroll:

<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 avec une molette de défilement de la souris

JScrollPane a une caractéristique intéressante. Si vous faites défiler avec la roulette de la souris, alors après le défilement du contenu entier du conteneur, le défilement de la page principale commence à tourner (bien sûr, s'il est disponible).

A en juger par le code jScrollPane.js ceci est fait spécialement (ce qui signifie que ce n'est pas un bug mais une fonctionnalité). Mais si cette fonctionnalité gêne, vous pouvez facilement l'éteindre.

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

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

Changer 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 désirée (mise à jour 1.08.10)

Parfois, il est nécessaire à la fois (ou pour une action) de faire défiler le bloc avec un tel défilement à une certaine position. Pour cela, le plugin a deux fonctions (pour une raison mal décrite):

scrollTo - fait défiler le contenu jusqu'à la position spécifiée. La position peut être spécifiée en px (en comptant à partir de la bordure supérieure de ce bloc avec défilement) ou définir l'ID - le bloc défilera vers l'élément avec l'ID spécifié

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

Les fonctions s'accrochent au bloc sur lequel le défilement a été initialisé.

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

J'attire votre attention sur le fait que "[0]" est obligatoire. Pourquoi est-ce - je ne sais pas (souhaitant apprendre à creuser le code du plug-in), mais sans cela ne fonctionne pas.

Avantages:

    * fonctionne bien dans tous les navigateurs populaires;
    * vous permet de configurer de manière flexible l'apparence et le comportement du parchemin;
    * Faites défiler avec la molette de la souris.

Moins:

    * Le défilement horizontal n'est pas implémenté.