scrollTop senza jquery

**magic_key** · 15-07-2015, 19:09

Ciao a tutti, vorrei poter eseguire un azione dopo aver scrollato 100 pixel senza usare jquery.

Con jquery so che dovrei usare qualcosa del genere, ma vorrei poter fare lo stesso col semplice javascript:

codice:

$(window).scroll(function() {
    if ($(this).scrollTop() === 100) {
        *azione*
    }
});

Come fare? Grazie

**badaze** · 15-07-2015, 20:13

Puoi fare cosi. Lo script testa se lo scroll >= 100 pixels.

codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
// se vuoi fare scattare l'evento più di una volta, rimuovi
// tutte le righe che hanno "fatto"
var fatto = false;
function pippo(aDiv) {
 scrolled = aDiv.scrollTop;
 document.getElementById('info').innerHTML = scrolled + 'pixels';
 
 if (fatto) {return}
 
 document.getElementById('pluto').innerHTML = '';  
 if (scrolled >= 100) {
   //----- Per eseguire l'azione una volta sola
  fatto = true;
   //----- Qui l'azione
   document.getElementById('pluto').innerHTML = 'Hai superato i 100 pixels';
 } // if (scrolled >= 100)
} // function pippo(aDiv) 
//-->
</script>
</head>
<body>
<div onscroll="pippo(this)" style='width:200px;height:200px;overflow:auto' >
A special construct (?ifthen|else) allows you to create conditional regular expressions. If the if part evaluates to true, then the regex engine will attempt to match the then part. Otherwise, the else part is attempted instead. The syntax consists of a pair of parentheses. The opening bracket must be followed by a question mark, immediately followed by the if part, immediately followed by the then part. This part can be followed by a vertical bar and the else part. You may omit the else part, and the vertical bar with it.
For the if part, you can use the lookahead and lookbehind constructs. Using positive lookahead, the syntax becomes (?(?=regex)then|else). Because the lookahead has its own parentheses, the if and then parts are clearly separated.
Remember that the lookaround constructs do not consume any characters. If you use a lookahead as the if part, then the regex engine will attempt to match the then or else part (depending on the outcome of the lookahead) at the same position where the if was attempted.
</div>
<hr/>
<div id="info"></div>
<hr/>
<div id="pluto"></div>
</body>
</html>

**magic_key** · 15-07-2015, 20:27

Grazie! Nel frattempo avevo risolto come segue, stavo giusto facendo dei test e devo dire che si comporta bene:

codice:

<script type="text/javascript">
	function test(){
		if(window.pageYOffset > 100)
		*azione*;
	}
	window.onscroll = test
</script>

Ora però se scrollo velocemente la pagina, l'azione viene eseguita più volte, ma leggendo al volo il tuo script mi sembra di capire che potrebbe aiutarmi a risolvere anche questa secondo problema

. Vedo che riesco a combinare..

**magic_key** · 15-07-2015, 22:12

Ho fatto varie prove, purtroppo non essendo molto pratico con js credo di non esserci arrivato

. Vorrei eseguire l'azione una sola volta.. Si può fare modificando questo codice?

codice:

<script type="text/javascript">
    function test(){
        if(window.pageYOffset > 100)
        *azione*;
    }
    window.onscroll = test
</script>

Discussione: scrollTop senza jquery

Strumenti discussione

Ricerca discussione

Visualizza

scrollTop senza jquery

Permessi di invio