Rileva quando Scroll raggiunge il fondo della pagina [senza jQuery]

Voglio avvertire qualcosa quando il rotolo raggiunge il fondo della pagina, in questo modo:Rileva quando Scroll raggiunge il fondo della pagina [senza jQuery]

$(function(){ 
    $(document).scroll(function() { 
    if($(document).scrollTop() == 0) alert("top"); 
    }) 
})

Ma senza jQuery, e di allarme quando raggiunge il Parte inferiore.

fonte

2012-04-08 Anonymous

Plain javascript metodo per rilevare inferiore di un elemento http: // stackoverflow.com/a/13526491/1488136 –

La risposta è disponibile qui https://stackoverflow.com/questions/3898130/check-if-a-user-has-scrolled-to-bottom –

document.onscroll = function() { 
    if(!document.body.scrollTop){ 
     alert('top'); 
    } 
}

JSFiddle demo

fonte

2012-04-08 02:22:33 Dennis

Questo funziona in IE 8? –

Preferirei '.addEventListener ('scroll', ...)' su '.onscroll = ...', per la flessibilità aggiuntiva ed evitare la collisione con altri gestori di eventi. Sfortunatamente questo non funziona in IE≤8, ma è abbastanza facile da polyfill. – ephemient

Puoi postare qui un esempio? –

if(window.addEventListener){ 
    window.addEventListener('scroll',scroll) 
}else if(window.attachEvent){ 
    window.attachEvent('onscroll',scroll); 
} 

function scroll(ev){ 
    var st = Math.max(document.documentElement.scrollTop,document.body.scrollTop); 
    if(!st){ 
      console.log('top'); 
    }else if((st+document.documentElement.clientHeight)>=document.documentElement.scrollHeight){ 
      console.log('bottom'); 
    } 
}

esempio: http://jsfiddle.net/ampersand/AEnzJ/

testato con http://browserling.com in cromo 17/18, Safari 5, ff 10/11.0, cioè 7-9

fonte

2012-04-08 02:29:45 ampersand

SyntaxError: Token imprevisto ILLEGAL –

@Tomirammstein in quale browser? – ampersand

Google Chrome, ed è raro: s –

-1

function addEvent(node, type, callback) { 
    if('addEventListener' in node) { 
     node.addEventListener(type, callback, false); 
    } else { 
     node.attachEvent('on' + type, callback); 
    } 
} 

addEvent(window, 'scroll', (function() { 
    // https://developer.mozilla.org/en/DOM/window.scrollY#Notes 
    var stObj, stProp; 
    if('scrollY' in window) { // CSSOM: 
     // http://www.w3.org/TR/cssom-view/#extensions-to-the-window-interface 
     stObj = window; 
     stProp = 'scrollY'; 
    } else if('pageYOffset' in window) { // CSSOM too 
     stObj = window; 
     stProp = 'pageYOffset'; 
    } else { 
     stObj = document.documentElement.clientHeight ? 
      document.documentElement : document.body; 
     stProp = 'scrollTop'; 
    } 

    var node = document.documentElement.clientHeight ? 
     document.documentElement : 
     document.body; // let's assume it is IE in quirks mode 
    var lastSt = -1; 
    return function(e) { 
     if(lastSt !== stObj[ stProp ] && // IE <= 8 fires twice 
      node.scrollHeight === stObj[ stProp ] + node.clientHeight) { 
      alert('bottom'); 
     } 
     lastSt = stObj[ stProp ]; 
    }; 
})());

È stato testato con successo con Firefox 11, Chrome 17, IE 9 (X-UA-Compatible: 8, 7, 5) e Opera 11.60.

fonte

2012-04-08 22:14:04 Saxoier

questo crash 5 e ff 11.0 per me. safari visualizza avvisi infiniti e ff appena bloccato. il cromo 18 si è comportato bene. – ampersand

@ampersand: Fx diventa nero a causa dell'avviso. Rimuovilo e tutto va bene (non lo rimuoverò da questo esempio a causa di questo bug). Non possiedo una copia di Safari. Forse è un problema simile come IE in modalità stranezze. In IE 'document.documentElement.scrollTop' è sempre zero. – Saxoier

Grazie a @Saxoier ma ho bisogno di un avviso quando la barra di scorrimento raggiunge il fondo della pagina; ma grazie comunque :) –

document.addEventListener('scroll', function (event) { 
    if (document.body.scrollHeight == 
     document.body.scrollTop +   
     window.innerHeight) { 
     alert("Bottom!"); 
    } 
});

JSFiddle qui: http://jsfiddle.net/cSer6/

fonte

2013-09-30 19:44:58 brendan

Questo codice non funziona su tutti i browser - ecco una soluzione completa sintetizzata da diverse fonti (URL nel codice): http://jsfiddle.net/W75mP/ – brendan

quale browser non supporta questo? conosci il cellulare? – ncubica

Questo sta lavorando per me in IE

document.onscroll = function() { 
    if(document.documentElement.scrollTop + window.innerHeight == document.documentElement.scrollHeight) 
    { 
     alert('bottom'); 
    } 
}

http://jsfiddle.net/cSer6/46/

fonte

2014-11-01 16:08:19

Rileva quando Scroll raggiunge il fondo della pagina [senza jQuery]

risposta

Problemi correlati