Sujet Précédent Sujet Suivant

Scrollbar custom

Résolu/Fermé
dePassage - 14 mars 2014 à 10:52
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 14 mars 2014 à 14:19
Bonjour,

Je développe un système de messagerie avec le formulaire d'envoie en bas de la conversation (style SMS). Je voudrais donc que la scrollbar reste par défaut en bas pour voir le dernier message affiché. Cela fonctionnait avec le code suivant : 

element = document.getElementById('messages');
element.scrollTop = element.scrollHeight;

J'ai ensuite voulu rajouter une barre custom avec le script JQuery prévu à cet effet : 

(function($){
   $(window).load(function(){
      $("#messages").mCustomScrollbar();
   });
})(jQuery);

La barre est bien customisée comme voulue, mais le scroll ne reste plus en bas par défaut. Je n'arrive pas à lier les deux scripts.

Avez-vous une solution ?

Je vous remercie
A voir également:

4 réponses

Réponse 1 / 4
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
14 mars 2014 à 14:01
J'ai pas trouvé d'options dans le script pour setter le scroll en bas par défaut, par contre tu peux faire quelque chose dans le style: 


	<script type="text/javascript">
	(function($){
	   $(window).load(function(){
	    	$("#messages").mCustomScrollbar({
	      		advanced:{
			    	autoScrollOnFocus: true
				}
			});
			$("#messages").mCustomScrollbar("scrollTo","bottom");
	   });
	})(jQuery);
	</script>

Sinon va falloir bidouiller...
1
Réponse 2 / 4
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
14 mars 2014 à 12:33
Est-ce que tu pourrais nous poster l'ensemble de tes script js+html concernés ?
0
Réponse 3 / 4
dePassage
Modifié par dePassage le 14/03/2014 à 13:56
En HTML, j'ai simplement un <div id="messages"> ... </div> sur lequel porte le scroll.

Ensuite, je place dans le css un "overflow:scroll" sur le div en question, et j'ajoute le js suivant : 

element = document.getElementById('messages');
element.scrollTop = element.scrollHeight;

et à ce moment là j'ai bien ma scrollbar qui est en bas par défaut, mais qui est moche et grise (la scrollbar d'origine quoi !)

Mais si j'ajoute le custom scrollbar (le script que j'ai posté dans mon premier message), en laissant le "overflow:scroll", la barre custom s'ajoute à la barre d'origine et ne se place pas en bas. Si j'enlève le "overflow:scroll", j'ai bien uniquement la barre custom, mais pas en bas par défaut.

J'espère être clair

EDIT : La scrollbar custom découle du script jquery.mCustomScrollbar.min.js de JQuery
0
Réponse 4 / 4
dePassage
14 mars 2014 à 14:05
C'est presque parfait !

Le seul petit défaut est le fait qu'il y ait une animation, on voit le scroll passer du haut vers le bas quand un message est ajouté.

Mais s'il faut vraiment trop bidouiller pour un défaut aussi léger, je me contenterai très bien de cette solution.

merci beaucoup !
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
14 mars 2014 à 14:11
J'ai pas trouvé mieux: 


(function($){
	   $(window).load(function(){
	    	$("#messages").mCustomScrollbar();
	    	$('#messages').mCustomScrollbar("scrollTo","bottom",{
			  scrollInertia:0
			});
	   });
	})(jQuery);
0
dePassage
14 mars 2014 à 14:12
C'est exactement ça... Super !
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
14 mars 2014 à 14:19
Cool, bonne suite :)
0

Discussions similaires

Traduction français vers créole guadeloupéen
Anonyme -
Raymond PENTIER -

1 réponse
rap français mp3 gratuit
skid-96 -
bms19 -

16 réponses
Mettre Facebook Messenger en français
bleumarine2009 -
lauredine61 -

1 réponse
je cherche une musique de rap francais
helpme76 -
Moi -

3 réponses
Regarder Erkenci kus en français
Caramilli974 -
Herenui -

11 réponses