J'essaie d'activer la case à cocher une fois que l'utilisateur a lu tous les accords. Pourtant, eh bien, j'ai essayé googling sans succès et aussi confus. J'essaie d'obtenir la "vraie" fin de scrollTop, mais en raison de différents moteurs de rendu (gecko, webkit, bla bla?) Une valeur fixe ne fonctionnera pas.javascript textarea scrollTop
Cela fait partie de mon apprentissage, donc évitez d'envoyer des solutions avec des bibliothèques.
Des suggestions?
Vous pouvez essayer d'utiliser scrollHeight propriété de la zone de texte et le comparer à scrollTop - si elles sont égales, l'utilisateur est tout en bas.
your_textarea.scrollTop + your_textarea.offsetHeight - your_textarea.scrollHeight devrait vous donner ce que vous voulez. Il peut être éteint de quelques pixels, donc je l'autoriserais probablement si c'était dans la gamme ~ -20. Par exemple, j'ai collé une énorme séquence de non-sens aléatoire dans une zone de texte et j'ai fait défiler vers le bas, puis j'ai exécuté ce code et cela m'a donné -2. C'est parce qu'il y a parfois des lignes vides en bas. S'il n'y a pas de lignes vides, alors en théorie cette valeur doit être 0 (veillez à utiliser === pour comparer à 0.)
En théorie.
trouver la hauteur du conteneur de défilement (en supposant qu'il a id="scroll")
var container_real_height = document.getElementById('scroll').offsetHeight
calculer maintenant
var container_content_height = document.getElementById('scroll').scrollHeight;
var container_scroll_amount = document.getElementById('scroll').scrollTop;
si container_content_height = container_scroll_amount + container_real_height (+ - quelques pixels) alors vous êtes à bottom ..
Voici ma mise en œuvre en utilisant un seuil (4 dans ce cas) pour déterminer si la zone de texte fait défiler ed au fond (ou presque au fond). J'ai également inclus l'affichage de la valeur calculée.
La métrique utilisée est scrollHeight, scrollTop et l'élément jQuery height().
Le seuil de '4' fonctionne pour IE8, les navigateurs Webkit et FF3.5. FF3.5 et Safari (Windows) peuvent aller tout le chemin à 0.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
$(function() {
$('#cb').hide(); //hide checkbox
var scrollThreshold = 4; //threshold value
var ta0 = $("#ta");
var ta = $("#ta")[0];
$("#ta").scroll(function(){
var p = ta.scrollHeight - (ta.scrollTop + ta0.height());
$('#pos').val(ta.scrollHeight + ' - (' + ta.scrollTop + ' + ' + ta0.height() + ') = ' + p);
if(p <= scrollThreshold) //if scroll value falls within threshold
$('#cb').show(); //show checkbox
}
);
});
</script>
</head>
<body>
<textarea id="ta" style="width: 200px; height: 100px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.</textarea>
<br />
<input type="text" id="pos" />
<input type="checkbox" id="cb" />
</body>
</html>
Voici la capture d'écran pour Safari:
essayé cela, il ne fonctionnera pas car la largeur est d'environ 400+ et quand je défile à la toute fin ça me donne 288. – allenskd