Solo quiero ejecutar un script cuando el ancho de la ventana gráfica es mayor que un valor establecido. También me gustaría verificar cómo el navegador cambia de tamaño y deshabilita/habilita según sea necesario. Intenté lograr esto usando matchMedia y, en lugar de verificar cada píxel, la secuencia de comandos solo se activa cuando la ventana gráfica es menor o mayor que un valor establecido.

Si cargo una ventana de visualización estrecha (menos de 1080 px), el JS no se activa, ¡perfecto! Ampliar la ventana gráfica para que tenga un ancho superior a 1080 px luego ejecuta el script, ¡también perfecto!

El problema que tengo es cuando reduzco la escala de una ventana gráfica más grande (más de 1080 px) a una estrecha/pequeña. El script aún funciona hasta que actualizo la página. Espero que alguien pueda ayudarme con eso.

Aparte, ¿es posible cambiar const mediaQuery = window.matchMedia('(min-width: 1080px)') para incluir una consulta de medios de altura mínima o más compleja si es necesario (no es esencial para esto).

Mi guion:

 const mediaQuery = window.matchMedia('(min-width: 1080px)') function viewportChange(e) { // Check if the media query is true if (e.matches) { $(document).ready(function() { var num_children = $('.split-loop__left').children().length; var child_height = $('.split-loop__right').height() / num_children; var half_way = num_children * child_height / 2; $(window).scrollTop(half_way); function crisscross() { var parent = $(".split-loop");//.first(); var clone = $(parent).clone(); var leftSide = $(clone).find('.split-loop__left'); var rightSide = $(clone).find('.split-loop__right'); if (window.scrollY > half_way ) { //We are scrolling up $(window).scrollTop(half_way - child_height); var firstLeft = $(leftSide).children().first(); var lastRight = $(rightSide).children().last(); lastRight.appendTo(leftSide); firstLeft.prependTo(rightSide); } else if (window.scrollY < half_way - child_height) { var lastLeft = $(leftSide).children().last(); var firstRight = $(rightSide).children().first(); $(window).scrollTop(half_way); lastLeft.appendTo(rightSide); firstRight.prependTo(leftSide); } $(leftSide).css('bottom', '-' + window.scrollY + 'px'); $(rightSide).css('bottom', '-' + window.scrollY + 'px'); $(parent).replaceWith(clone); } $(window).scroll(crisscross); }); } } // Register event listener mediaQuery.addListener(viewportChange) // Initial check viewportChange(mediaQuery)