Tengo una función jQuery que verifica si un elemento DOM desborda el eje y de la ventana gráfica y aplica una clase a un elemento DOM diferente si ese es el caso. Quiero que funcione en la carga y en el cambio de tamaño:
$.fn.overflowsViewport = function() { var elementTop = $(this).offset().top; var elementBottom = elementTop + $(this).outerHeight(); var viewportTop = $(window).scrollTop(); var viewportBottom = viewportTop + $(window).height(); return elementBottom > viewportBottom; }; $(window).on('load resize', function() { if ($('#list .list').overflowsViewport()) { $("#post").addClass("shorter"); } else { $("#post").removeClass("shorter"); } });Esto funciona con carga, pero solo algunas veces. Cambiar el tamaño está bien.
Supongo que algo está causando que la función se ejecute antes de que la página se haya cargado por completo en algunas ocasiones. Por lo general, una actualización completa creará el efecto deseado, pero no podemos esperar que el usuario sepa/haga eso.
¿Cómo puedo asegurarme de que esta función se cargue correctamente para producir un resultado consistente? ¿O el tiempo no es el problema aquí?
Considera lo siguiente.
$(function() { $.fn.overflowsViewport = function() { var elementBottom = $(this).position().top + $(this).outerHeight(); var viewportBottom = $(window).scrollTop() + $(window).height(); console.log(elementBottom, viewportBottom); return elementBottom > viewportBottom; }; function checkOverflow() { if ($('#list .list').overflowsViewport()) { $("#post").addClass("shorter"); } else { $("#post").removeClass("shorter"); } } $(window).resize(checkOverflow); checkOverflow(); }); .list { height: 450px; } .shorter { height: 120px; overflow: auto; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="post"> <ul id="list"> <li class="list item">Item 1</li> </ul> </div> Esto ejecuta la función checkOverflow al load y cuando se activa el evento de cambio de resize en la ventana.