Recherche script défilement

Utilisateur anonyme -  
 Utilisateur anonyme -
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

Réponse 1 / 17
warlix Messages postés 1204 Statut Contributeur 288
 
salut


vas jeter un oeil dans la boite

http://radservebeer.free.fr/

0
Réponse 2 / 17
Utilisateur anonyme
 
Bonjour,

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

Bonne journée,
Alaedyna.
0
Réponse 3 / 17
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
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
Réponse 4 / 17
Utilisateur anonyme
 
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
Réponse 5 / 17
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
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
Réponse 6 / 17
Utilisateur anonyme
 
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
Réponse 7 / 17
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
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
Réponse 8 / 17
Utilisateur anonyme
 
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
Réponse 9 / 17
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
un lien serais mieux que une image !!
0
Réponse 10 / 17
Utilisateur anonyme
 
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
Réponse 11 / 17
Utilisateur anonyme
 
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
Réponse 12 / 17
Utilisateur anonyme
 
Euh... je vais tenter un petit up tout timide...
0
Réponse 13 / 17
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
salut

je regarde cela demain !

la je suis naze je viens d arriver de 900 KM

RAD
0
Réponse 14 / 17
Utilisateur anonyme
 
Ok, merci ! Alors à demain et repose-toi bien, je vais sans doute te casser les pieds ! :)
0
Réponse 15 / 17
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
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
Réponse 16 / 17
Utilisateur anonyme
 
D'accord, merci pour les renseignements. Je ne sais pas comment je vais faire maintenant, je ne souhaite pas avoir recours au php.
0
Réponse 17 / 17
Utilisateur anonyme
 
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

Discussions similaires

Excel 365 + Windows 10 Arrêt défilement flèches
VALBRISE -
VALBRISE -

5 réponses
Touche arrêt défil sur clavier
munette -
inconnusoldat -

48 réponses
Excel : les flèches déplacent le document
Hypergonar -
Hypergonar -

2 réponses
Recherche de pairs sur utorrent bloqué
flo.h -
Claire -

4 réponses
Réglage chaine de la TNT FR3 TF1 A2 TMC
Yamina -
Redbart -

1 réponse