Activer ou désactiver une fonction après avoir fait défiler vers le bas

Question

J'ai une div avec "Termes et Conditions". C'est un div verticalement scrollable. L'idée est de faire défiler tout le chemin qui permettra à un utilisateur de soumettre (en appuyant sur le bouton soumettre). Mais ce n'est pas vraiment un bouton, mais une ancre avec une fonction javascript à l'intérieur.

<a onclick="showDialog();"><img 
    name="continue" value="Continue" alt="Continue" 
    src="${resource(dir: 'images/buttons', file: 'submit.gif')}" 
    border="0" /></a> 

Alors ce que je dois faire est quand un utilisateur fait défiler vers le bas, il sera alors activer la fonction javascript, mais il le reste sinon.

Un conseil?

Answer 1

Le scrollTop de div (#terms) est la distance la plus basse dans le haut de la zone visible. Le height de la div est combien l'utilisateur voit. Il s'ensuit donc que le scrollTop du div plus le height du div doit être au moins égal à la hauteur totale du document complet des conditions de service à l'intérieur (que nous appellerons #termsInner).

Voici quelques exemple le code HTML: (Note: Vous pouvez essayer cela à http://jsfiddle.net/8U7GY/6/.)

<p id="instructions">Please read these terms and conditions now. 
<b>You must scroll to the bottom before continuing.</b></p> 

<div id="terms"> 
    <div id="termsInner"> 
     <p>Lorem ipsum...</p> 
    </div> 
</div> 

<span><a id="submit">Register me!</a></span> 

Certains code CSS:

p { 
    padding: 0.25em; 
} 

#terms { 
    border: solid 1px; 
    height: 24em; 
    overflow: auto; 
    margin-bottom: 1em; 
} 

#termsInner { 
    padding: 0.5em 0; 
} 

.highlighted { 
    background-color: #ff0; 
} 


#submit { 
    color: blue; 
    text-decoration: underline; 
} 

Et un code JavaScript (ceci doit être en $(function() { ... }); de sorte qu'il ne soit exécuté qu'une fois que le document est prêt.)

// Select the elements of the HTML page. 
var instructions = $('#instructions'), 
    terms = $('#terms'), 
    termsInner = $('#termsInner'), 
    submit = $('#submit'); 

// Bind an event handler that will run when the user 
// has not scrolled through the terms of service. 
submit.bind('click', function() { 
    // Highlight the instructions. 
    instructions.addClass('highlighted'); 

    // Remove the highlighting after two seconds. 
    setTimeout(function() { 
     instructions.removeClass('highlighted'); 
    }, 2000); 
}); 

// Once the user scrolls through, call showDialog instead 
// when the user clicks. 
terms.scroll(function() { 
    if (terms.scrollTop() + terms.height() >= termsInner.height()) { 
     submit.unbind('click').bind('click', showDialog); 
    } 
}); 

// This is where you would continue the user registration process. 
function showDialog() { 
    alert('whatever'); 
} 

Il y a plusieurs points importants à noter.

1. Nous n'utilisons l'attribut HTML onclick mais plutôt relions gestionnaires d'événements à l'aide bind et programmation unbind. Cela nous permet de faire une chose différente selon que l'utilisateur a défilé ou non. JQuery fournit la méthode scroll pour enregistrer une fonction à exécuter lorsque l'utilisateur fait défiler la div. Nous vérifions la somme de scrollTop et height par rapport à la hauteur du contenu à l'intérieur de la div, et si cela est OK, nous dissocions le gestionnaire click d'origine et nous en lions un nouveau.
2. Nous mettons en évidence les instructions (si l'utilisateur n'a pas encore défilé mais clique sur l'ancrage de toute façon) pour en faciliter l'utilisation. Si l'utilisateur clique et constate que rien ne se passe, il pense que le formulaire d'inscription ne fonctionne pas, quitterait votre site et se retrouverait avec une mauvaise expérience.

Modifier: L'a corrigé pour fonctionner sur Internet Explorer.En raison de la façon dont IE fonctionne, vous ne pouvez pas avoir de remplissage sur le div #terms lui-même, donc réglez n'importe quel remplissage sur #termsInner à la place.

Answer 2

Vous devez vérifier si la hauteur scrollTop + de <div> est égale à scrollHeight.

Avec jQuery:

$('a').click(function(){ 
    var myDiv = $('div') 
    if (myDiv.scrollTop() + myDiv.height() == myDiv.get(0).scrollHeight) 
    { 
     showDialog(); 
    } 
    else 
    { 
     return false; 
    } 
}); 

Vous pouvez également vérifier la hauteur scrollTop de <div> + sur l'événement de défilement, puis activer/désactiver l'ancre en fonction de si oui ou non le scrollHeight a été atteint.