Sujet Précédent Sujet Suivant

Inversion d'une ScrollBar

Kanala - Modifié par kazma le 14/02/2014 à 17:08
jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 - 14 févr. 2014 à 18:55
Bonjour à tous,
Je suis sur un code, mais je n'arrive pas à trouver l'effet que je recherche. J'écume depuis plusieurs heures le net à sa recherche, mais ce que j'essaye ne fonctionne pas :S Donc je me tourne vers vous !
Alors je recherche le moyen d'inverser une ScrollBar, qui sera appelé via une div class ou Id. Je voudrais que le texte le plus bas soit visible en premier et que s'il y a besoin, on remonte pour voir le haut. Un peu comme le principe d'un chat. Seulement ce n'est pas pour un chat.
Si mon code est le suivant par exemple (en class, mais je peux mettre en ID, ce n'est pas un problème) : 
<div class="Message"> HAUT Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici BAS</div>


Et que mon css est le suivant : 

.Messages{
overflow-y: scroll;
height:300px;
width:235px;
text-align:center;
margin-top:-10px;}


Comment faire, quoi rajouter pour que la scroll commence vers le bas et non vers le haut? Je peux utiliser du JS, ou du Css. C'est un message qui sera posté sur un forum.

Je vous remercie par avance !

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 344
14 févr. 2014 à 17:14
Bonjour,

quelque chose du genre : 
//------------------------------------------------
//NB: Mettre un ID pour le DIV
//Remplacer 'divExample' par l'ID du DIV
//------------------------------------------------
var objDiv = document.getElementById("divExample");
objDiv.scrollTop = objDiv.scrollHeight;

0
Réponse 2 / 3
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
14 févr. 2014 à 17:30
boujour

il faut utiliser scrollTop 

<!DOCTYPE html>
<html>
<head>

<style>
.Messages{
overflow-y: scroll;
height:200px;
width:235px;
text-align:center;
margin-top:-10px;
}

</style>

<script language="javascript">


function initscroll(){

var el=document.getElementById('Messages')

el.scrollTop=el.scrollHeight-el.offsetHeight

}

typeof window.addEventListener == 'undefined' ? attachEvent("onload",initscroll) : addEventListener('load',initscroll,false);

</script>
</head>
<body style="margin:50px">
<div id='Messages' class="Messages"> HAUT Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici Blabla mon texte ici BAS</div>
</body>
</html>
0
Kanala
14 févr. 2014 à 18:18
Alors tout d'abord merci de votre réponse. Dans une page HTML, cela fonctionne parfaitement. Mais le truc, c'est que j'aimerai mettre cet effet, dans un post sur un forum, sans passer du coup par HTML. Et là, ça bloque. J'ai beau importer le JS, il ne fonctionne pas et ma Scroll garde son sens, et n'est pas inversé. Est-ce possible de passer outre ou je ne pourrais avoir cet effet que sur une page html?
0
Réponse 3 / 3
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
14 févr. 2014 à 18:25
j'ai pas bien tout capté mais une chose est sure c'est qu'il faut du html
0
jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 344
14 févr. 2014 à 18:55
Bonjour,

Tu utilises des DIV .. c'est donc que tu fais du HTML.. ( non ?.. sinon quel "langage" utilises tu ??)
Les solutions que nous t'avons proposées sont en Javascript.
Je peux utiliser du JS,
et donc c'est bien ce que nous te proposons.

Il faut par contre, déclencher le script (la fonction) par une condition.
Soit tu te serts d'un timeout sur ta page pour rafraichir tous les x secondes, soit tu ne le fais qu'au chargement de ta page,
soit tu le fais lors de l'appuie sur un bouton...etc.. (enfin.. quand je dis soit.. c'est OU / ET )
par exemple : Kazma t'a proposé : 
typeof window.addEventListener == 'undefined' ? attachEvent("onload",initscroll) : addEventListener('load',initscroll,false);


Si tu regardes sur le net, en te servant de ce que nous t'avons dit ( utilisation de "Scrolltop" ) tu devrais pouvoir trouver pleins d'exemple d'utilisation....
0

Discussions similaires

Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
integrer une variable javascript dans un lien hypertext
rabixpvb -
Stopub -

4 réponses
est-ce que "goto" existe en javascript ?
dmk04 -
bultez -

4 réponses
Partie entière d'un nombre
Sniper_Vgaerr -
DeAtHCrAsH -

2 réponses
Redirection par header ou javascript?
Evangun -
Anthomicro -

8 réponses
Rejoignez-nous