Je fais une application Web et je ressemble vraiment aux barres de défilement de style iPhone qui s'effondrent automatiquement. Je ne l'avais jamais vu sur des produits iOS, mais il semble maintenant que Facebook l'ait mis en œuvre dans la liste de contacts de discussion.
Pourquoi est-ce que je l'aime tellement? Il s'efface automatiquement de manière automatique, il est donc moins imposé et peut économiser des quantités importantes d'espace. Lorsqu'il est affiché, il est efficacement à l'intérieur de la DIV, au lieu de autour de celui-ci, en faisant une utilisation efficace de l'espace.
Des idées sur la façon de faire cela? Ce n'est pas "iScroll" de Matteo Spinelli qui adopte la barre de défilement "normale" (laquelle pour les produits iOS est bien sûr de style iOS) pour une utilisation sur DIVS.
J'ai essayé d'utiliser le plug-in sur les survolateurs de Jonathan Azoff de Jonathan Azoff, mais je ne peux pas sembler que ça va travailler exactement bien. J'ai réussi à obtenir les barres de défilement pour s'effacer automatiquement et sortir automatiquement sur Sousener (comme Facebook fait), mais le comportement de défilement diffère entre les navigateurs (et semble remplacer le comportement de défilement du navigateur dans la vitesse et l'inertie sur OSX). Un rapide coup d'œil au code source semble compatible avec cette conclusion.
Y a-t-il d'autres plug-ins / bibliothèques sur lesquels je peux utiliser pour maintenir précisément le comportement de défilement du navigateur, mais avoir des barres de défilement qui s'effondrent automatiquement et regarder iOS-style?
3 Réponses :
Désolé, il vous a été pris si longtemps pour obtenir une réponse à une question aussi simple ... Voici près de ce que je pense que vous recherchez http://baijs.nl/tinyscrollbar/ . Ensuite, pour la décoloration, utilisez simplement une fonction simple, telle que celle-ci.
Premier pour le HTML P>
$(function() {
$("#scrollbar1").bind('hover', function() {
// On hover fade in
$(this).fadeIn(1000);
});
$("#scrollbar1").bind('mouseout', function() {
// On mouseout fade out
$(this).fadeOut(1000);
});
});
Merci pour votre contribution, Sun-Tzu. J'ai parcouru Tinyscroll et c'est assez agréable, mais j'ai décidé que ce n'est pas assez parfait. En particulier, dans Firefox (sur mon MacBook), je perds le défilement lisse (et le défilement finit par être dans des quantités discrètes / quantifiées). Un rapide coup d'œil sur le code suggère que cela est dû à la façon dont ils traitent manuellement les événements de saisie et invoquent le défilement en conséquence à ces événements. J'aimerais vraiment préserver une performance et un comportement défilant absolument natif.
J'ai donc écrit mon propre plug-in jquery, Innerscroll . Je l'ai ouvert sur Github . Une démo est également disponible ici . Il suffit d'inclure mon fichier et d'ajouter 3 lignes de code: où Je suis sûr qu'il y a des bugs. Tous les commentaires, critiques ou suggestions seraient appréciés. contenu est l'élément qui déborde. Une configuration supplémentaire mineure est que vous devez créer un élément parent wrapper pour contenu avec des dimensions presque identiques, mais seulement une largeur légèrement plus petite (pour masquer contenu La barre de défilement natif). Wrapper est également l'endroit où la nouvelle barre de défilement de décoloration sera placée.
J'ai trouvé que Nanoscroller JS soit le remplaceur de barre de défilement le plus fiable qui prend en charge ce style. http://jamesflorentino.github.com/nanoscrollerjs/
Un plugin vraiment sexy qui est ... Dommage que ce n'est pas JQ Mobi (maintenant AppFramework) - Pourtant, je suppose.