Recherche script défilement

Fermé
Utilisateur anonyme - 14 oct. 2007 à 00:42
 Utilisateur anonyme - 26 oct. 2007 à 21:47
Bonjour,

Je recherche un script qui permettrait un scrolling sans la scrollbar. En effet, je souhaiterais que lorsque l'on passe sa souris sur une zone prédéfinie, la zone de texte monte ou descende, comme s'il y avait une barre de défilement.

Je préfèrerais que le script soit en Javascript.

Merci d'avance.

Bonne nuit,
Alaedyna.
A voir également:

17 réponses

warlix Messages postés 1201 Date d'inscription mercredi 25 juillet 2007 Statut Contributeur Dernière intervention 21 février 2009 288
14 oct. 2007 à 01:57
salut


vas jeter un oeil dans la boite

http://radservebeer.free.fr/

0
Utilisateur anonyme
14 oct. 2007 à 13:33
Bonjour,

Merci pour l'adresse mais je ne trouve pas ce que je recherche.

Bonne journée,
Alaedyna.
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
14 oct. 2007 à 13:48
SALUT

voila un scrol en js

colle ce code entre <head> </head>
<style type="text/css">  
#divUpControl{position:absolute; width:320; left:10; top:10; z-index:1; text-align: right} 
#divDownControl{position:absolute; width:320; left:10; top:270; z-index:1; text-align: right} 
#divContainer{position:absolute; width:320; height:240; overflow:hidden; top:30; left:10; clip:rect(0,320,240,0); visibility:hidden} 
#divContent{position:absolute; top:0; left:0} 
</style>
<script language="JavaScript">

function verifyCompatibleBrowser(){ 
    this.ver=navigator.appVersion 
    this.dom=document.getElementById?1:0 
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; 
    this.ie4=(document.all && !this.dom)?1:0; 
    this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
 
    this.ns4=(document.layers && !this.dom)?1:0; 
    this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5) 
    return this 
} 
bw=new verifyCompatibleBrowser() 
 
 
var speed=50 
 
var loop, timer 
 
function ConstructObject(obj,nest){ 
    nest=(!nest) ? '':'document.'+nest+'.' 
    this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0; 
    this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0; 
    this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight 
    this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight 
    this.up=MoveAreaUp;this.down=MoveAreaDown; 
    this.MoveArea=MoveArea; this.x; this.y; 
    this.obj = obj + "Object" 
    eval(this.obj + "=this") 
    return this 
} 
function MoveArea(x,y){ 
    this.x=x;this.y=y 
    this.css.left=this.x 
    this.css.top=this.y 
} 
 
function MoveAreaDown(move){ 
	if(this.y>-this.scrollHeight+objContainer.clipHeight){ 
    this.MoveArea(0,this.y-move) 
    if(loop) setTimeout(this.obj+".down("+move+")",speed) 
	} 
} 
function MoveAreaUp(move){ 
	if(this.y<0){ 
    this.MoveArea(0,this.y-move) 
    if(loop) setTimeout(this.obj+".up("+move+")",speed) 
	} 
} 
 
function PerformScroll(speed){ 
	if(initialised){ 
		loop=true; 
		if(speed>0) objScroller.down(speed) 
		else objScroller.up(speed) 
	} 
} 
 
function CeaseScroll(){ 
    loop=false 
    if(timer) clearTimeout(timer) 
} 
var initialised; 
function InitialiseScrollableArea(){ 
    objContainer=new ConstructObject('divContainer') 
    objScroller=new ConstructObject('divContent','divContainer') 
    objScroller.MoveArea(0,0) 
    objContainer.css.visibility='visible' 
    initialised=true; 
} 
// end absolutely positioned scrollable area object scripts 

</script>


LA TU INSERT CELA DANS LA BALISE <body>
 <body onLoad="InitialiseScrollableArea()">


colle ce code entre <body onload="InitialiseScrollableAera()"> .....</body>
<div id="divUpControl"> <a href="javascript:;" onMouseOver="PerformScroll(-7)" onMouseOut="CeaseScroll()">[scroll 
  up]</a> </div>
<div id="divDownControl"> <a href="javascript:;" onMouseOver="PerformScroll(7)" onMouseOut="CeaseScroll()">[scroll 
  down]</a> </div>
<div id="divContainer"> 
  <div id="divContent"> <b>Scroll </b> 
    <p> Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy 
      eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat.</p>
    <p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor cum 
      soluta nobis eligend optio comque nihil quod a impedit anim id quod maxim 
      placeat facer possim omnis es voluptas assumenda est, omnis dolor repellend. 
      Temporem autem quinsud et aur office debit aut tum rerum necesit atib saepe 
      eveniet ut er repudiand sint et molestia non este recusand.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy 
      eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat.</p>
    <p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor cum 
      soluta nobis eligend optio comque nihil quod a impedit anim id quod maxim 
      placeat facer possim omnis es voluptas assumenda est, omnis dolor repellend. 
      Temporem autem quinsud et aur office debit aut tum rerum necesit atib saepe 
      eveniet ut er repudiand sint et molestia non este recusand.</p>
    <b>Scroll Area Content End</b> </div>
</div>
 


RAD
0
Utilisateur anonyme
14 oct. 2007 à 14:40
Bonjour,

Merci pour le code. En l'adaptant à ma page, il y a quelques problèmes. D'une part, mon texte ne se trouve plus au bon endroit. Peut-être l'ai-je mal adapté. Voici le css de la zone en question :

#contenu {
	background-image: url(images/radeau/contenu.jpg);
	background-repeat:no-repeat;
	font-family:"Book Antiqua";
	font-size:10px;
	color:#000000;
	width:520px;
	height:550px;
	position:absolute;
	left: 0px;
	top: 200px;
}

#texte_contenu {
	font-family:"Book Antiqua";
	font-size:12px;
	text-align:justify;
	color:#000000;
	width:365px;
	height:380px;
	position:absolute;
	left: 70px;
	top: 40px;
}


#scrollup {
	width:11px;
	height:20px;
	position:absolute;
	left:440px;
	top:40px;
}

#scrolldn {
	width:11px;
	height:20px;
	position:absolute;
	left:440px;
	top:380px;
}


Et dans la page HTML, cela donne :

<div id="contenu">
	<div id="texte_contenu">
	  <p>Texte</p>
	</div>
<div id="scrollup"><img src="images/radeau/scrollup.png" width="11" height="20" border="0"></div>
<div id="scrolldn"><img src="images/radeau/scrolldn.png" width="11" height="20" border="0"></div>
	</div>


Si j'ai bien suivi ton code,
#divUpControl correspond à #scrollup.
#divDownControl correspond à #scrolldn.
#divContainer correspond à #contenu.
#divContent correspond à #texte_contenu.

J'ai, par conséquent, changer ces paramètres. Cela donne :

<script language="JavaScript">

function verifyCompatibleBrowser(){ 
    this.ver=navigator.appVersion 
    this.dom=document.getElementById?1:0 
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; 
    this.ie4=(document.all && !this.dom)?1:0; 
    this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
 
    this.ns4=(document.layers && !this.dom)?1:0; 
    this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5) 
    return this 
} 
bw=new verifyCompatibleBrowser() 
 
 
var speed=50 
 
var loop, timer 
 
function ConstructObject(obj,nest){ 
    nest=(!nest) ? '':'document.'+nest+'.' 
    this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0; 
    this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0; 
    this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight 
    this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight 
    this.up=MoveAreaUp;this.down=MoveAreaDown; 
    this.MoveArea=MoveArea; this.x; this.y; 
    this.obj = obj + "Object" 
    eval(this.obj + "=this") 
    return this 
} 
function MoveArea(x,y){ 
    this.x=x;this.y=y 
    this.css.left=this.x 
    this.css.top=this.y 
} 
 
function MoveAreaDown(move){ 
	if(this.y>-this.scrollHeight+objContainer.clipHeight){ 
    this.MoveArea(0,this.y-move) 
    if(loop) setTimeout(this.obj+".down("+move+")",speed) 
	} 
} 
function MoveAreaUp(move){ 
	if(this.y<0){ 
    this.MoveArea(0,this.y-move) 
    if(loop) setTimeout(this.obj+".up("+move+")",speed) 
	} 
} 
 
function PerformScroll(speed){ 
	if(initialised){ 
		loop=true; 
		if(speed>0) objScroller.down(speed) 
		else objScroller.up(speed) 
	} 
} 
 
function CeaseScroll(){ 
    loop=false 
    if(timer) clearTimeout(timer) 
} 
var initialised; 
function InitialiseScrollableArea(){ 
    objContainer=new ConstructObject('contenu') 
    objScroller=new ConstructObject('texte_contenu','contenu') 
    objScroller.MoveArea(0,0) 
    objContainer.css.visibility='visible' 
    initialised=true; 
} 

</script>


Le texte se trouve en haut à gauche de #contenu et non plus danstexte_contenu et je ne peux savoir si le scrolling marche étant donné que cette zone est plus haute que le texte. Ai-je fait une erreur quelque part ou oublié de changer quelque chose ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
14 oct. 2007 à 15:14
Essaye ca
#divcontenu {
	position: absolute;
	width: 520;
	height: 550;
	overflow: hidden;
	left: 0px;
	top: 200px;
	clip: rect(0,365,380,0);
	visibility: hidden
}
#divtexte_contenu {
	font-family: "Book Antiqua";
	font-size: 12px;
	text-align: justify;
	color: #000000;
	position: absolute;
	top: 0;
	left: 0
} 
0
Utilisateur anonyme
14 oct. 2007 à 15:22
Le résultat n'est pas mieux. :s La partie divcontenu et divtexte_contenu sont noire et il n'y a plus le contenu du texte.
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
14 oct. 2007 à 16:02
moi avec tes donnees j ai fait ca j ai juste rajouter du texte pour faire le scroll ca marche !!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title>
    </title>
    <style type="text/css" media="screen">
    </style>
<style type="text/css">  
#scrollup{width:11px;
	height:20px;
	position:absolute;
	left:440px;
	top:40px;} 
#scrolldn{width:11px;
	height:20px;
	position:absolute;
	left:440px;
	top:380px} 
#contenu{position:absolute; width: 520; height: 550; overflow: hidden; left:20px; top: 200px; clip: rect(0,365,380,0); visibility: hidden }
#contenu_texte{position:absolute; top:0; left:0} 
</style>
<script language="JavaScript">

function verifyCompatibleBrowser(){ 
    this.ver=navigator.appVersion 
    this.dom=document.getElementById?1:0 
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; 
    this.ie4=(document.all && !this.dom)?1:0; 
    this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
 
    this.ns4=(document.layers && !this.dom)?1:0; 
    this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5) 
    return this 
} 
bw=new verifyCompatibleBrowser() 
 
 
var speed=50 
 
var loop, timer 
 
function ConstructObject(obj,nest){ 
    nest=(!nest) ? '':'document.'+nest+'.' 
    this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0; 
    this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0; 
    this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight 
    this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight 
    this.up=MoveAreaUp;this.down=MoveAreaDown; 
    this.MoveArea=MoveArea; this.x; this.y; 
    this.obj = obj + "Object" 
    eval(this.obj + "=this") 
    return this 
} 
function MoveArea(x,y){ 
    this.x=x;this.y=y 
    this.css.left=this.x 
    this.css.top=this.y 
} 
 
function MoveAreaDown(move){ 
	if(this.y>-this.scrollHeight+objContainer.clipHeight){ 
    this.MoveArea(0,this.y-move) 
    if(loop) setTimeout(this.obj+".down("+move+")",speed) 
	} 
} 
function MoveAreaUp(move){ 
	if(this.y<0){ 
    this.MoveArea(0,this.y-move) 
    if(loop) setTimeout(this.obj+".up("+move+")",speed) 
	} 
} 
 
function PerformScroll(speed){ 
	if(initialised){ 
		loop=true; 
		if(speed>0) objScroller.down(speed) 
		else objScroller.up(speed) 
	} 
} 
 
function CeaseScroll(){ 
    loop=false 
    if(timer) clearTimeout(timer) 
} 
var initialised; 
function InitialiseScrollableArea(){ 
    objContainer=new ConstructObject('contenu') 
    objScroller=new ConstructObject('contenu_texte','contenu') 
    objScroller.MoveArea(0,0) 
    objContainer.css.visibility='visible' 
    initialised=true; 
} 
// end absolutely positioned scrollable area object scripts 

</script>
  </head>
  <body onLoad="InitialiseScrollableArea()">
    <div id="contenu">
      <div id="contenu_texte">
        <p>
          T
   <p>Lorem ipsum dolor sit amet consectetuer Vestibulum vitae leo cursus sagittis. Ligula felis fringilla facilisi Morbi sociis condimentum ipsum Aenean nibh risus. Aliquam pretium est lacinia sit ac vel Curabitur feugiat Vestibulum Lorem. Lobortis habitasse convallis felis congue ante eros magnis ligula Curabitur ac. Ut tellus fermentum pellentesque at elit tempor.</p>
<p>Parturient sem Cras In justo justo velit pharetra ridiculus Vestibulum elit. Sed hendrerit pellentesque pellentesque cursus ullamcorper felis Curabitur vitae hac pede. Vitae rutrum interdum enim et vestibulum mauris hendrerit commodo Quisque in. Sed eu wisi id ligula elit Morbi eros turpis pede justo. Nam nunc tempus ligula dolor ipsum pellentesque mi magnis at nibh. Ultrices.</p>
<p>Mauris sit congue orci Curabitur congue at a neque laoreet enim. Ipsum id wisi purus lacinia vitae aliquam sodales risus neque dolor. Mus elit convallis consequat volutpat Aliquam nulla tempor Vestibulum feugiat congue. Venenatis pharetra cursus lacinia in turpis adipiscing ante pede mi non. Fames vel sed lorem eros tempus condimentum Nunc.</p>
<p>Pede sollicitudin pede nec Suspendisse ante ligula consectetuer elit Vestibulum ut. Pretium convallis elit vestibulum pretium Vestibulum Curabitur nisl et Nunc habitasse. Porttitor natoque tempus Vivamus pharetra at Lorem nulla massa tempus massa. Ipsum ridiculus sem tempus quis ac magnis aliquam consequat Donec Morbi. Enim ac habitasse wisi ligula mauris ante ante congue.</p>
 <p>Lorem ipsum dolor sit amet consectetuer Vestibulum vitae leo cursus sagittis. Ligula felis fringilla facilisi Morbi sociis condimentum ipsum Aenean nibh risus. Aliquam pretium est lacinia sit ac vel Curabitur feugiat Vestibulum Lorem. Lobortis habitasse convallis felis congue ante eros magnis ligula Curabitur ac. Ut tellus fermentum pellentesque at elit tempor.</p>
<p>Parturient sem Cras In justo justo velit pharetra ridiculus Vestibulum elit. Sed hendrerit pellentesque pellentesque cursus ullamcorper felis Curabitur vitae hac pede. Vitae rutrum interdum enim et vestibulum mauris hendrerit commodo Quisque in. Sed eu wisi id ligula elit Morbi eros turpis pede justo. Nam nunc tempus ligula dolor ipsum pellentesque mi magnis at nibh. Ultrices.</p>
<p>Mauris sit congue orci Curabitur congue at a neque laoreet enim. Ipsum id wisi purus lacinia vitae aliquam sodales risus neque dolor. Mus elit convallis consequat volutpat Aliquam nulla tempor Vestibulum feugiat congue. Venenatis pharetra cursus lacinia in turpis adipiscing ante pede mi non. Fames vel sed lorem eros tempus condimentum Nunc.</p>
<p>Pede sollicitudin pede nec Suspendisse ante ligula consectetuer elit Vestibulum ut. Pretium convallis elit vestibulum pretium Vestibulum Curabitur nisl et Nunc habitasse. Porttitor natoque tempus Vivamus pharetra at Lorem nulla massa tempus massa. Ipsum ridiculus sem tempus quis ac magnis aliquam consequat Donec Morbi. Enim ac habitasse wisi ligula mauris ante ante congue.</p>
 <p>Lorem ipsum dolor sit amet consectetuer Vestibulum vitae leo cursus sagittis. Ligula felis fringilla facilisi Morbi sociis condimentum ipsum Aenean nibh risus. Aliquam pretium est lacinia sit ac vel Curabitur feugiat Vestibulum Lorem. Lobortis habitasse convallis felis congue ante eros magnis ligula Curabitur ac. Ut tellus fermentum pellentesque at elit tempor.</p>
<p>Parturient sem Cras In justo justo velit pharetra ridiculus Vestibulum elit. Sed hendrerit pellentesque pellentesque cursus ullamcorper felis Curabitur vitae hac pede. Vitae rutrum interdum enim et vestibulum mauris hendrerit commodo Quisque in. Sed eu wisi id ligula elit Morbi eros turpis pede justo. Nam nunc tempus ligula dolor ipsum pellentesque mi magnis at nibh. Ultrices.</p>
<p>Mauris sit congue orci Curabitur congue at a neque laoreet enim. Ipsum id wisi purus lacinia vitae aliquam sodales risus neque dolor. Mus elit convallis consequat volutpat Aliquam nulla tempor Vestibulum feugiat congue. Venenatis pharetra cursus lacinia in turpis adipiscing ante pede mi non. Fames vel sed lorem eros tempus condimentum Nunc.</p>
<p>Pede sollicitudin pede nec Suspendisse ante ligula consectetuer elit Vestibulum ut. Pretium convallis elit vestibulum pretium Vestibulum Curabitur nisl et Nunc habitasse. Porttitor natoque tempus Vivamus pharetra at Lorem nulla massa tempus massa. Ipsum ridiculus sem tempus quis ac magnis aliquam consequat Donec Morbi. Enim ac habitasse wisi ligula mauris ante ante congue.</p>
</div></div>
      <div id="scrollup"><a href="javascript:;" onMouseOver="PerformScroll(-7)" onMouseOut="CeaseScroll()">
        <img src="images/radeau/scrollup.png" width="11" height="20" border="0"></a>
        
      </div>
      <p>
      </p>
      <div id="scrolldn">
        <a href="javascript:;" onMouseOver="PerformScroll(7)" onMouseOut="CeaseScroll()">
        <img src="images/radeau/scrolldn.png" width="11" height="20" border="0"></a>
      </div>
   
  </body>
</html>
0
Utilisateur anonyme
14 oct. 2007 à 16:30
Chez moi, ça ne marche pas. Je ne comprends pas. Je te joins des captures d'écran de ma page en question.

Avec le code JS : http://imagik.fr/images/bfi1192372200j.jpg
Avec barre standard : http://imagik.fr/images/jdv1192372225n.jpg
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
14 oct. 2007 à 16:49
un lien serais mieux que une image !!
0
Utilisateur anonyme
14 oct. 2007 à 19:03
Je m'en doute mais pour le moment, rien n'est en ligne, je travaille en local avant de pouvoir mettre en ligne quand tout est OK.
0
Utilisateur anonyme
15 oct. 2007 à 21:41
Voilà l'adresse de la page en question, j'ai inséré le code que tu m'as indiqué : http://rosavoraginesubmersa.free.fr/alaedyna/lra.htm
0
Utilisateur anonyme
19 oct. 2007 à 20:14
Euh... je vais tenter un petit up tout timide...
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
19 oct. 2007 à 21:03
salut

je regarde cela demain !

la je suis naze je viens d arriver de 900 KM

RAD
0
Utilisateur anonyme
19 oct. 2007 à 21:32
Ok, merci ! Alors à demain et repose-toi bien, je vais sans doute te casser les pieds ! :)
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
20 oct. 2007 à 15:25
ce script n est pas fais pour ce que tu veux faire !!

le display: none; fais que le scroll ne prend pas en compte le texte cache!

il serais plus simple dans ton cas de faire une includ php ou une fausse iframe en css

0
Utilisateur anonyme
20 oct. 2007 à 19:30
D'accord, merci pour les renseignements. Je ne sais pas comment je vais faire maintenant, je ne souhaite pas avoir recours au php.
0
Utilisateur anonyme
26 oct. 2007 à 21:47
Ralalalalala...

Tout ce que je trouve ne marche pas sur mes pages. En revanche, sur celles des autres, ça marche...

J'ai trouvé un script ici : http://www.lephpfacile.com/forum/7-javascript/4155-scrolling
Je n'obtiens aucun scrolling... En revanche, il n'y a aucune dépassement au niveau de la zone définie, et encore, ça dépend des pages...

Quand à ce script là : http://www.wikistuce.info/doku.php/javascript/recreer_une_scrollbar_en_javascript
Il ne se passe absolument rien...

Ca commence à m'énerver. Personne ne pourrait me concocter un petit code via ces deux codes ?

Merci d'avance.
Alaedyna.
0