ccc

Mostrando entradas con la etiqueta JQuery: scroll. Mostrar todas las entradas
Mostrando entradas con la etiqueta JQuery: scroll. Mostrar todas las entradas

JS: Obtener las posición actual del scroll

<script>
const getScrollPosition = (el = window) => ({
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});
</script>
<a href="javascript:console.log(getScrollPosition());">Pulsa</a>

JQuery Scroll: Detectar si el usuario ha llegado al final de la página con el scroll

function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == getDocHeight()) {
           alert("bottom!");
    }
});

JQuery: Activar y desactivar el scroll

Para desactivarlo:
$('html, body').css({
    overflow: 'hidden',
    height: '100%'
});
Para activarlo:
$('html, body').css({
    overflow: 'auto',
    height: 'auto'
});

JQuery Scroll al principio o final de la página

window.scrollTo(0,0);


Scroll 100 píxeles a la derecha (horizontalmente):
window.scrollTo(100,0);


Scroll 100 píxeles hacía abajo (verticalmente):
window.scrollTo(0,100);


Scroll al final del todo de la página:
$('html,body').animate({scrollTop: document.body.scrollHeight},"fast");

Scroll directo al top de una capa:
var p = jQuery("#micapa");
var offset = p.offset();
jQuery('html,body').animate({scrollTop: offset.top}, 800);

JQuery: Detectar si se hace scroll hacía arriba o hacía abajo

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"
        $('body').bind(mousewheelevt, function(e){
            var evt = window.event || e //equalize event object    
            evt = evt.originalEvent ? evt.originalEvent : evt;              
            var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta
            if(delta > 0) {
                console.log("arriba");
            }
            else{
                console.log("abajo");
            }  
        });

JQuery: scroll

$(window).scroll(function(){
    if (jQuery(this).scrollTop() > 150) {
    ...
   }
});