Salut à tous,

Je cherchais un plug-in jQuery pour faire défiler automatiquement l'overflow de contenu, comme les textes trop longs dans les cases. Une sorte de <marquee> ou ticker amélioré et paramétrable en somme. Je n'ai pas trouvé ce que je cherchais alors je l'ai codé moi-même et je le partage avec vous :

Code javascript : 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
    $.fn.autoscroll = function(params){
        params = jQuery.extend({
            direction: 'vertical',
            speed: 10,
            pauseDelay: 1000
        }, params);
 
        $(this).each(function(i,elm){
            var container = $(elm);
            container.wrap("<div class='autoscroll-wrapper' style='overflow: hidden'></div>");          
            var wrapper = container.parent('.autoscroll-wrapper');
            $(["top","right","bottom","left"]).each(function(i,dir){
              wrapper.css("margin-"+dir,container.css("margin-"+dir));
              container.css("margin-"+dir,0);
            });
            var posAttr=["scrollTop","scrollLeft"], dimAttr=["height","width"], sdimAttr=["scrollHeight","scrollWidth"];
            if(params.direction === 'horizontal'){ posAttr.reverse(); dimAttr.reverse(); sdimAttr.reverse(); }
            var s, d, o, t, dt = Math.round(1000/params.speed);
 
            function scrollLoop(){
                if(s+o<d+1){                    
                    container[posAttr[0]](s);
                    t = setTimeout(scrollLoop, dt);
                    s++;
                } else {
                    t = setTimeout(function(){
                        s=0;
                        t = setTimeout(scrollLoop, params.pauseDelay);                     
                    }, params.pauseDelay);
                }
            }
 
            function initAutoscroll(){
                d = container.prop(sdimAttr[0]);
                o = container[dimAttr[0]]();                
                wrapper[dimAttr[1]](container.prop(sdimAttr[1]));                
                s=0;
                if(t!=null){ clearTimeout(t); }
                if(o < d){ scrollLoop(); }
            }
 
            $(window).resize(initAutoscroll);
            initAutoscroll();
            container.on("DOMNodeRemovedFromDocument", function(){ if(t!=null){ clearTimeout(t); } });
        });
 
        return this;
    };

Démo disponible ici : http://codepen.io/anon/pen/JqLHy

Vous pouvez appeler la méthode autoscroll avec comme paramètres la direction de défilement, la vitesse (speed) et le temps de pause en début et fin de scroll (pauseDelay). Cela présuppose que l'élément ciblé a déjà les bonnes règles CSS pour qu'il puisse défiler (overflow:auto). L'élément conteneur est mis dans un <div> wrapper afin de masquer la scrollbar. Dans certains cas le fait d'ajouter ce wrapper peut casser la mise en forme, il faut alors appliquer les styles sur le wrapper au lieu de l'élément, ou retirer l'ajout du wrapper dans le code.

Le code a été testé sous Chrome et Firefox dans leurs dernières versions. Je vous laisse le tester et proposer vos améliorations