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