Défilement automatique d'une page

Question

Bonjour,

je souhaite faire en sorte que le contenu d'une fenêtre du navigateur défile automatiquement vers le bas (jusqu'au bas de la page). Une fois le bas de la page atteint, il faut que ça défile vers le haut jusqu'à atteindre le haut de la page et vice verca (c'est pour faire un système d'affichage dynamique)

Je ne sais pas trop comment gérer ça en JavaScript
j'ai googler un peu avec des mots comme javascript scroll up down top bottom mais sans succès...

Je suis tombé notamment sur
http://www.javascriptfr.com/forum/sujet-SCROLL-SUR-PAGE-WEB_940672.aspx
mais comment créer une fonction top() qui retourne vrai lorsque le haut est atteint

Sur le principe je pense qu'il vaut une variable qui stocke l'état (défilement vers le bas en cours ou défilement vers le haut ou pas de défilement)

Il faut tester si le haut est atteint.
Dans ce cas si on était en train de défiler vers le haut on défile vers le bas (on change la variable d'état)

Il faut aussi tester si le bas est atteint
Si c'est le cas et que l'on était en train de défiler ver les bas on défile vers le haut (en fait on change la variable d'état)

On décale ensuite en fonction de la valeur contenue dans la variable d'état

Pouvez-vous m'aider ?

Merci d'avance

cs_bultez · Accepted Answer

il ne reste qu'à optimiser un ch'tiot poil....   
mais bon, pour le principe, pas pour les performances 
Cordialement     Bul

cs_scls19fr · Answer

Actuellement j'ai fait ceci (mais je ne sais pas quoi mettre dans ma fonction top) Scroll Scroll

cs_bultez · Answer

bonjour,

function top()
{    if ( document.body.scrollTop==0 )  return true;   }

peut-être ?

CordialementBu

cs_scls19fr · Answer

nickel merci beaucoup

cs_scls19fr · Answer

Ah... j'ai quand même un petit soucis... je veux faire la même chose mais pour un iframe j'ai mis mon code JavaScript dans un .js j'ai essayé et ça marche nickel pour faire défiler une page html simple par contre ça merde pour ma page contenant un iframe As-tu une idée ? (c'est parfois difficile lorsqu'on est seul de voir pourquoi ça déconne) Si tu peux aussi me dire ce que tu optimiserais (ainsi qu'un BON bouquin ou très bon site sur JS) Merci d'avance Le fichier autoscroll.js var direction = true; // true=bas false=haut var scroll = true; var delay=100; var step=5; var obj=null; function pageScroll(new_obj) { scrolldelay = setTimeout('pageScroll(obj)', delay); // scrolls every xxx milliseconds obj=new_obj; //obj=document.body; //obj=document.getElementById('mydata').src; if (scroll) { if ( bottom() ) { direction=false; //alert("bottom"); } if ( top() ) { direction=true; //alert("top"); } if ( direction ) { window.scrollBy(0, step); } else { window.scrollBy(0, -step); } } } function bottom() { if ( (obj.scrollTop + obj.clientHeight) == obj.scrollHeight ) { return true; } else { return false; } } function top() { if ( obj.scrollTop==0 ) { return true; } else { return false; } } Le contenu (ce qui est dans l'iframe) content.php Content Content et le contenant (la page qui contient l'iframe) scroll_iframe.php Scroll an iframe Alternative text for browsers that do not understand IFrames.

cs_scls19fr · Answer

Attention... j'ai oublié de préciser une chose je ne veux/peux pas toucher au fichier content.php 

En effet, le contenu de l'iframe est généré par une application sur laquelle je n'ai pas la main... donc il faut que je fasse ça depuis le contenant (scroll_iframe.php)

cs_scls19fr · Answer

J'ai essayé de mettre

onLoad="pageScroll(document.getElementById('mydata').contentDocument.body)"

mais cela ne fonctionne pas...

Une idée ?

cs_scls19fr · Answer

Je pense être sur la piste d'une idée...

Le problème vient vraissembalement de 
window.scrollBy(0, step);
Il faudrait appliquer scrollBy non pas à la fenêtre mais à l'iframe
j'ai essayé
document.getElementById('mydata').scrollBy(0, step); mais ça ne marche pas

une idée ? merci...

cs_bultez · Answer

c'est "le contenu" de l'iframe qu'il faut bouger
        pas le contenu de la page. 
le fait de mettre dans un .js ne change rien.
CordialementBu

cs_scls19fr · Answer

Je ne peux pas toucher à content.php pour les raisons évoquées plus haut

Je dois bien pouvoir en javascript accéder via l'id à l'iframe et faire scrollBy sur l'iframe !

cs_scls19fr · Answer

En fait j'ai enfin un début de solution

    var fen=window.frames[0];

    if ( direction ) {
      fen.scrollBy(0, step);
    } else {
      fen.scrollBy(0, -step);
    }

mais j'aurais préféré identifier mon iframe à l'aide de son id... plutôt qu'avec l'indice 0 dans window.frames[]... mais à la rigueur je m'en fiche car je n'ai qu'un iframe

j'ai trouvé la solution ici
http://www.webmasterworld.com/forum91/299.htm

cs_bultez · Answer

window.frames["name du frame"] peut-être mieux,
c'est vrai que j'avais eu aussi quelques surprises 
        à ce niveau ( avec IE ? de mémoire d'Alzheimer...  )

Cordialement     Bul

cs_scls19fr · Answer

Désolé mais j'ai essayé window.frames["mydata"] et window.frames['mydata']
avec mydata l'id du frame et ça ne marche pas...

j'ai aussi un autre problème (sécurité cette fois)
ça marche nickel pour les pages qui sont hébergé sur mon  serveur
par contre ça ne fonctionne pas sur d'autres alors que les noms de domaines sont

  (où il y a mon script) et http://www.domaine.fr où il y a aussi des pages qui doivent être vue de manière défilante

j'ai lu sur
http://www.webmasterworld.com/forum91/5373.htm
qu'il fallait jouer avec mod_proxy sur apache... j'essairais ça à l'occasion...
(si tu as des connaissances là dessus je suis intéressé aussi)

cs_bultez · Answer

>>avec mydata l'id du fram
pas l'id... le name, et ça baigne ( tu me diras que d'habitude
       IE sait remplacer l'ID par le name et lycée de versailles...
       pa ici peut-être ? )

>>ça ne fonctionne pas sur d'autres domaines 

oui. sur un autre domaine on ne peut qu'afficher, rien d'autres.
( on se demande bien pourquoi...  mais bon, c'est ainsi )

il y a peu, XTremDuke nous parlais d'une possibilité,
   mais uniquement avec ajax sous FF, pour l'instant (?) 
  en paramétrant un machin qui ressemble à la gestion de htaccess

CordialementBu

cs_scls19fr · Answer

Ah!  j'avoue que je ne connais pas la différence entre id et name....

Je suis très interessé par la solution dont tu me parles car justement mon afficheur dynamique utilise Firefox (en fait ça sera basé matériellement sur Linutop http://www.linutop.com ) et côté navigateur Firefox + une extension pour faire un mode kiosque (kiosk mode extension R-Kiosk https://addons.mozilla.org/en-US/firefox/addon/1659 )

cs_bultez · Answer

...
document.getElementById("toto")
window.frames["tata"]

>>solution dont tu me parles
noté ni les infos, ni où on en causait, ni rien ( pas de besoins pour l'instant,
       entr'autres  car, hélas, exclusif FF aujourd'hui )
poser la question dans le forum ? rechercher dans les réponses de XTRemDuke ?
les moteurs recherches ? 

CordialementBu

francoisch · Answer

Un grand merci pour cette fonction de scroll automatique qui va beaucoup aider un de mes utilisateurs lourdement handicapé à lire sans utiliser sa souris.

Francois

cs_scls19fr · Answer

Ravi que ça te convienne (au départ ça n'est pas l'objectif mais tant mieux si ça peut servir à d'autres)
En fait au départ c'est pour faire un afficheur dynamique autonome qui fait défiler des pages web sans qu'il y ai besoin d'action de la part de l'utilisateur.
J'ai rajouté un petit système de pause en haut et en bas pour éviter d'avoir "le mal de mer"
Un exemple :
http://www.celles.net/php/scroll/scroll_iframe.php (fait scroller le contenu d'un iframe)
ou
http://www.celles.net/php/scroll/scroll_page.php (fait scroller le contenu d'une page... mais il y a une petite erreur... je ne sais plus où... ça a eu marché !!)

Je poste ici le code js si je venais à effacer ma page

Il doit y avoir moyen d'intégrer ça dans un script GreaseMonkey pour Firefox
 http://www.greasespot.net/
 https://addons.mozilla.org/fr/firefox/addon/748

afin de faire une extension qui permette de faire défiler n'importe quelle page web visualisée dans un navigateur (le code JavaScript est injecté dans la page après l'avoir récupérée puis le JS est interprété... ça permet de customiser n'importe quel affichage de page web sans avoir le droit de modifier le source de la page web.

/*
Gestion du scrolling vertical d'une page HTML ou d'un iframe
DÃ©file vers le bas.
Quand le bas est atteint dÃ©file vers le haut
Quand le haut est atteint, dÃ©file vers le bas
etc...
*/

var delay=50;
var step=1;

var pause_delay_bottom = 1500; //0; //1500; // pause en ms en bas
var pause_delay_top = 1500; //0; //1500; // pause en ms en haut

var direction = true; // true=bas false=haut
var scroll = true;

var obj=null;
var win=null;

function play()  {

}

function pause()  {

}

function pageScroll(new_obj, new_win) {

  obj=new_obj;
  //obj=document.body;
  //obj=document.getElementById('mydata').contentDocument.body;

  win=new_win

  //alert('objet autoscroll "'+obj.value+"'")

  if (scroll) {
    if ( bottom() ) {
      direction=false;
      //alert("bottom");
      scrolldelay = setTimeout('pageScroll(obj,win)', pause_delay_bottom);
    } else if ( top() ) {
      direction=true;
      //alert("top");
      scrolldelay = setTimeout('pageScroll(obj,win)', pause_delay_top);
    } else {
      scrolldelay = setTimeout('pageScroll(obj,win)', delay); // scrolls every xxx milliseconds    
    }

    //var win=window;
    //var=top.framename;
    //var=top.frames[1];
    //var win=window.frames[0];

    if ( direction ) {
      //document.getElementById('mydata').scrollBy(0, step);
      //window.scrollBy(0, step);
      win.scrollBy(0, step);
    } else {
      //document.getElementById('mydata').scrollBy(0, -step); 
      //window.scrollBy(0, -step);    
      win.scrollBy(0, -step);
    }
  }
}

function bottom()
{
  if ( (obj.body.scrollTop + obj.body.clientHeight) == obj.body.scrollHeight ) {
    return true;
  } else {
    return false;
  }
}

function top()
{
  if ( obj.body.scrollTop==0 ) {
    return true;
  } else {
    return false;
  }
}

function debug()
{
  alert(obj.body.innerHTML);
  //alert("hello");
}

Défilement automatique d'une page

18 réponses

Votre réponse

Discussions similaires