jQuery Girl
  1. jQuery Girl
  3. débordement css: faites défiler. commencer par le bas
Intereting Posts
Pourquoi l’appel $ .ajax pour les données json déclenche-t-il le rappel d’erreur lorsque le code d’état http est «200 OK»? Comment obtenir une image sélectionnée à partir du lien de publication en utilisant WordPress? Utilisation de la fonction error dans jquery / ajax Vue partielle dynamic + détournement de formulaire jquery + validation du client = ne fonctionne pas Comment parsingr un tableau JSON dans jQuery? Empêcher les clics dans jQuery en provoquant plusieurs fois Jquery sortable (‘sérialiser’) L’image de l’extension apparaît comme un lien brisé lorsqu’il est référencé depuis content-script Puis-je utiliser .delay () avec .animate () dans jQuery? Impossible d’accéder à l’ID de contrôle asp.net dans jQuery graphiques à puces – sélection externe de barres Comment animer des éléments avec les transitions css3 après avoir caché un élément jquery.on scroll ne fonctionne pas Existe-t-il un événement tap and double tap dans le graphe dirigé par la force d3.js? case à cocher val ne montre pas false

débordement css: faites défiler. commencer par le bas

Je construis un widget de discussion en ligne qui est réduit (réduit et fixé au bas de la page) par défaut, puis agrandi lorsque vous cliquez dessus.

Il a une hauteur fixe et overflow-y: scroll . Je veux que la barre de défilement commence en bas et défile vers le haut, mais cela pose problème.

Si je ne widget.toggle('blind') jamais le widget, ce que je fais avec widget.toggle('blind') (JQuery), je peux simplement faire défiler avec du javascript lors du chargement de la page: avec .scrollTop() , cependant, je souhaite que le widget soit initialement réduit. L’utilisation de .scrollTop() sur le widget réduit n’a aucun effet! En outre, chaque fois que je réduis / développe le widget, il défile jusqu’en haut.

Y a-t-il une bibliothèque ou avez-vous des astuces pour résoudre ce problème?

Vous pouvez le faire comme ça:

  1. Déclarez votre hauteur chatView (widget) minimisée ( 5vh dans mon exemple) par défaut
  2. Lorsque l’utilisateur veut ouvrir le chatView (cliquez dans mon exemple), vous ajoutez class ( ouvrez dans mon exemple) et augmentez sa hauteur ( 90vh dans mon exemple). Avec propriété de transition – vous obtenez une animation recherchée
  3. Utilisez la méthode jQuery mentionnée .scrollTop avec la hauteur de conteneur requirejse ( #chatView> div dans mon exemple), ce qui l’assure de faire défiler vers le bas. 
 $(function(){ $("#chatView").click(function(){ $(this).toggleClass("open").scrollTop($("#chatView>div").height()); }); }); 
  *{ margin:0; } footer{ height:10vh; position: absolute; bottom: 0; } #chatView{ width: 20vw; background:red; position:absolute; bottom:0; height:4vh; transition: height 1s; overflow-y:scroll; } #chatView.open{ height: 90vh; } #chatView>div{ background:green; height: 95vh; } #chatView>figure{ height: 4vh; }