Discussion :

[Min's]

Bonjour à Tous,

Résumé : Je cherche à utiliser ScrollTo pour faire défiler une liste de DIV dans une DIV avec l'overflow à none. et uniquement cette DIV, le reste de ma page ne doit pas bouger.

Question complète : J'ai une question toute simple, mais pour laquelle je me creuse la tête depuis 2 jours dans trouver et rien sur le net. Tout ce que j'ai pu trouver ne fonctionne pas...

J'ai une DIV dont voici les caractéristiques CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
.cpage {
    position:absolute;
    top:5%;
    left:50%;
    margin-left: -400px;
    width:800px;
    height: 90%;
    border: none;
    overflow:hidden;
}

Et dedans, j'ai plusieurs DIV empilées qui font chacune 100% de large et de haut donc c'est des boites faisant chaque fois toute la hauteur, donc on en voit une et pas les autres.

J'ai ma liste de lien avec comme balise :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="shiftpage('portfolio')">Portfolio</a>

Je voulais utiliser ScrollTo pour pouvoir défiler proprement entre les pages.

J'ai donc trouvé plusieurs solutions mais aucune ne fonctionne, j'ai fini par utiliser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
function moveTo(container, element){
    container=$(container);
    element=$(element);
 
    var tlx = element.x ? element.x : element.offsetLeft;
    var tly = element.y ? element.y : element.offsetTop;
 
    var elementwh = Element.getDimensions(element);
    var brx = tlx + elementwh['width'];
    var bry = tly + elementwh['height'];
 
    var containerwh = Element.getDimensions(container);
    var top = container.scrollTop;
    var bottom = containerwh ['height'] + container.scrollTop;
 
    if (bry > bottom) myOwnMove(container, container.scrollTop, (top + (bry - bottom)));
    if (tly < top) myOwnMove(container, container.scrollTop, (top - (top - tly)));
 
    return element;
}

Au départ, j'utilisais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

container.scrollTop = (top + (bry - bottom))

ce qui marchait, mais en direct, sans aucune animation.

J'ai essayé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

container.scrollTo(top + (bry - bottom))

mais sans succès.

Donc j'ai "fabriqué" un truc sans nom en attendant mieux, mais c'est pas terrible...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function myOwnMove(el, from, to) {
    if (from > to) {
        for (i=from; i>=to; i=i-0.0005) {
            el.scrollTop=i;
        }
    } else if (from < to) {
        for (i=from; i<=to; i=i+0.0005) {
            el.scrollTop=i;
        }
    }
}

Quelqu'un aurait la solution pour utiliser ScrollTo ?

Il faut savoir en plus que j'ai tout testé. Si je vire la height et l'overflow, ça fonctionne...

Gniiiii

MErci d'avance

Min's

PS : J'ai un mal de crâne du Diable, donc si je ne suis pas clair dans mes propos, il faut me le dire

[gwyohm]

Bonjour,

scrollTo permet de faire scroller la page, pas un élément.

Si tu veux avoir un effet pour un scroll, le plus simple est de définir ton propre effet ; voici un exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
var ScrollEffect = Class.create(Effect.Base, {
  initialize:function(element) {
    this.element = $(element);
 
    this.myOptions = Object.extend({ 
      mode:"px",
      hScroll: 0,
      vScroll: 0
    }, arguments[1] || {});
    this.myOptions.hScrollOrigin = this.element.scrollLeft;
    this.myOptions.vScrollOrigin = this.element.scrollTop;
    switch(this.myOptions.mode) {
    case "px" :
      this.myOptions.hScrollPx = this.myOptions.hScroll - this.myOptions.hScrollOrigin;
      this.myOptions.vScrollPx = this.myOptions.vScroll - this.myOptions.vScrollOrigin;			
      break;
    case "pct" :
      var dim = this.element.getDimensions();
      this.myOptions.hScrollPx = (this.myOptions.hScroll * this.element.scrollWidth - (dim.width / 2)) - this.myOptions.hScrollOrigin;
      this.myOptions.vScrollPx = (this.myOptions.vScroll * this.element.scrollHeight - (dim.height / 2)) - this.myOptions.vScrollOrigin;
      break;
    default :
      throw "Unsupported mode"
    }
    this.start(this.myOptions);
  },
 
  update : function(position) {
    this.element.scrollLeft = this.myOptions.hScrollOrigin + this.myOptions.hScrollPx * position;
    this.element.scrollTop = this.myOptions.vScrollOrigin + this.myOptions.vScrollPx * position;
  }
});

L'avantage de créer un effet, c'est que tu peux utiliser toutes les options natives des effets (durées, transitions, hooks, chainage...)
Dans l'exemple que je donne, tu peux travailler en pourcentage ou en pixels.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div id="test" style="float:left;width:200px;height:200px;border:1px solid red;overflow:scroll">
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
		qsdf<br/>
	</div>

Par exemple pour à 10 pixels en vertical, tu fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
new ScrollEffect("test", {mode:'px', vScroll:10});

Pour scroller à la moitié tu fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
new ScrollEffect("test", {mode:'pct', vScroll:0.5});

[Min's]

gwyohm, mille fois merci.

J'ai conservé ma fonction moveTo légèrement modifiée pour me renvoyée le scroll qu'il doit faire, puis j'appelle ta méthode et ça marche nickel...



(On sait mettre résolu quelque part ? )