Scroll et DIV [Résolu]

[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 :

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 :

<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 :

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 :

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

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

J'ai essayé

Code :

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 :

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 :

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 :

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 :

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

Pour scroller à la moitié tu fais :

Code :

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 ? )