Détection et affichage suivant overflow

Marsh Posté le 01-07-2012 à 12:05:50

Bonjour à tous,

Voici ma problématique : "faire apparaître une flèche indiquant que l'ensemble du contenu d'un div n'est pas affiché et nécessite de faire défiler".

Actuellement, la détection que nous avons utilisée fait apparaître la flèche uniquement après avoir commencé à scroller sur la page et non pas dès le chargement car la détection est basé sur la présence du scroll ou non.

Est-ce que quelqu'un aurait une suggestion pour réaliser un script, utilisant jQuery par exemple (qui nous sert de base pour plusieurs actions dans notre site).

En vous remerciant par avance.

Cordialement.

P.S. Voici le code actuel pour détecter s'il y a scroll ou non sur un div

if($('#volet-droit #centre').scrollHeight() < $('#volet-droit #centre').clientHeight()) {
$('#volet-droit #centre').append('<img src="../images/fleche.gif" id="fleche"/>').show();
};

Message édité par francoish le 01-07-2012 à 14:59:54

Reply

Marsh Posté le 01-07-2012 à 12:05:50

Reply

Marsh Posté le 08-07-2012 à 18:37:52

Rebonjour à tous,

Après une bonne semaine de réflexion, j'ai trouvé une solution que voici :

jQuery(
function($)
{
$(document).ready(function() {
if($('#volet-droit #centre')[0].scrollHeight > $('#volet-droit #centre').innerHeight()) {
$('#volet-droit #centre').append('<img src="../images/fleche.gif" id="fleche"/>');

}

});
$('#volet-droit #centre').bind('scroll', function()
{
if($('#volet-droit #centre').scrollTop() + $('#volet-droit #centre').innerHeight() >=
$('#volet-droit #centre')[0].scrollHeight) {
$('#volet-droit #fleche').remove();
}
else
if($('#volet-droit #centre')[0].scrollHeight > $('#volet-droit #centre').innerHeight()) {
$('#volet-droit #centre').append('<img src="../images/fleche.gif" id="fleche"/>');
}

});
}
);

Si vous avez des commentaires pour améliorer cette fonction...

Elle fait apparaître la flèche dès le chargement du document. La masque une fois qu'on est arrivé en fin de scroll et la fait réapparaître si on remonte dans le scroll.

Cordialement.

Reply

Marsh Posté le 09-07-2012 à 01:53:52

Essaye quand c'est possible de mettre tes $('machin') dans des variables, car là en plus d'être lourd ce n'est pas performant

Code :

jQuery(
function ($) {
var centre;
var fleche = $('<img src="../images/fleche.gif" id="fleche"/>');
centre = $('#volet-droit #centre');
centre.append(fleche);
centre.bind('scroll', function () {
if (centre.scrollTop() + centre.innerHeight() >= centre[0].scrollHeight) {
fleche.hide(400);
}
else if (centre[0].scrollHeight > centre.innerHeight()) {
fleche.show(400);
}
});
centre.trigger('scroll')
}
);

Ici c'est simple, je déclare, centre et fleche, fleche étant un élément dom englobé dans un wrapper jquery.
Une fois au domready, je met systématiquement la fleche au chargement, ensuite je bind l'event scroll, et ensuite j'execute cet evenement pour initialiser l'état de la fleche

Message édité par gatsu35 le 09-07-2012 à 02:08:51

---------------
Blablaté par Harko

Reply

Détection et affichage suivant overflow

Sujets relatifs:

Leave a Replay