2012-08-28 5 views
4

Quelqu'un peut-il suggérer un bon script simple d'auto-incrustation verticale jQuery? celui qui n'est pas ballonnement, j'ai juste besoin pour cela de démarrer automatiquement et de faire défiler 6 ou plus li dans un div. J'ai essayé le jquery.autoscroll.js mais je n'ai pas réussi à démarrer automatiquement.jQuery défile verticalement verticalement dans un div

$.fn.autoscroll.defaults = { 
    start: { 
     step: 50, 
     scroll: true, 
     direction: "down", 
     pauseOnHover: true 
    }, 
    delay: 5000, 
    ffrw: { 
     speed: "fast", 
     step: 100 
    } 
}; 

Répondre

14
var div = $('div.autoscrolling'); 
var scroller = setInterval(function(){ 
    var pos = div.scrollTop(); 
    div.scrollTop(++pos); 
}, 100)​ 

Working Demo.

EDIT:

Pour arrêter le défilement lorsque la div a fait défiler vers le bas ajouter le contrôle suivant à la fin de ce qui précède function() {} -

if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) 
    clearInterval(scroller); 
} 
+2

et quand arrive à la fin, il va essayer de faire défiler et faire défiler et faire défiler et faire défiler –

+2

@FlashThunder: Il y a beaucoup de réponses déjà disponibles sur le SO pour vérifier. Vérifiez si 'scrollTop' a atteint la hauteur du conteneur et utilisez' clearInterval'. Grosse affaire. Comment cela justifie-t-il un vote négatif? Suggérez une solution et pas seulement le problème. Allez faire des recherches en premier. –

+0

[Pour vérifier si div a fait défiler vers le bas/la fin] (http://bit.ly/17nEh7d) –

1

La réponse de Robin n'a pas vraiment fait l'affaire pour moi, pour plusieurs raisons, alors voici une version modifiée et étendue de son approche:

var div = $('.scrollbit'); 

$('.scrollbit').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(evt) { 
    if (evt.type === 'DOMMouseScroll' || evt.type === 'keyup' || evt.type === 'mousewheel') { 

    } 
    if (evt.originalEvent.detail < 0 || (evt.originalEvent.wheelDelta && evt.originalEvent.wheelDelta > 0)) { 
     clearInterval(scrollbit); 
    } 
    if (evt.originalEvent.detail > 0 || (evt.originalEvent.wheelDelta && evt.originalEvent.wheelDelta < 0)) { 
     clearInterval(scrollbit); 
    } 
}); 

var scrollbit = setInterval(function(){ 
    var pos = div.scrollTop(); 
    if ((div.scrollTop() + div.innerHeight()) >= div[0].scrollHeight) { 
     clearInterval(scrollbit); 
    } 
    div.scrollTop(pos + 1); 
}, 100); 

avec l'aide de user1248475 anonyme ici:

Detect whether scroll event was created by user

et cette réponse:

https://stackoverflow.com/a/9392134

espoir qui est utile pour ceux qui cherchent à résoudre le problème de la façon de défilement automatique une div avec jquery et arrête lorsque l'utilisateur fait défiler manuellement.

0

Le téléchargement d'autoscroll.js sur github a les mauvais fichiers dans le téléchargement. Si vous recherchez là-bas, vous pouvez les trouver.

J'ai fait une démo de travail sur le lien ci-dessous, que vous pouvez copier si vous le souhaitez.

autoscroll.js at github

my working autoscroll demo