He creado este script:
jQuery(".resultlist").mousewheel(function(event, delta) { this.scrollLeft -= (delta); event.preventDefault(); }); que activa una función de desplazamiento horizontal sobre el contenedor .resultlist y funciona como se esperaba. Necesito deshabilitar esto en anchos de pantalla por debajo de 545 px, así que lo envolví en una función de cambio de tamaño.
/* Trigger Resize Script */ jQuery(document).ready(function(){ function resizeForm(){ var width = (window.innerWidth > 0) ? window.innerWidth : document.documentElement.clientWidth; if(width > 545){ jQuery(".resultlist").mousewheel(function(event, delta) { this.scrollLeft -= (delta); event.preventDefault(); }); } else { // invert } } window.onresize = resizeForm; resizeForm(); }); /* End Trigger Resize Script */El problema que tengo es que la secuencia de comandos aún se ejecuta si else es cierto. Comencé a trabajar en una función que incluiría y luego eliminaría una secuencia de comandos separada basada en el ancho de pantalla, pero esto se volvió muy engorroso y seguramente no es la forma correcta de lograrlo.
Necesito convertir la función de la rueda del mouse para que se comporte como un desplazamiento vertical normal, de modo que pueda cambiar entre mi desplazamiento horizontal actual y un desplazamiento vertical normal dentro de la función de cambio de tamaño.
¿Cómo modifico la siguiente función para desplazarme verticalmente?
jQuery(".resultlist").mousewheel(function(event, delta) { this.scrollLeft -= (delta); event.preventDefault(); });Están sucediendo muchas cosas en su código. Uno de los conceptos erróneos es que crea una tonelada de oyentes de rueda de mouse en los elementos al cambiar el tamaño de la ventana. Así es como puede lograr lo que necesita:
'use strict'; // Allows an event handler to run only when the event has stopped to fire function debounce(callback, delay = 200) { let timeout; return function() { const context = this, args = arguments; window.clearTimeout(timeout); timeout = window.setTimeout(function() { callback.apply(context, args); }, delay); }; } jQuery(document).ready(function() { let width, dirProp; function resizeForm() { width = jQuery(window).width(); dirProp = (width > 545) ? 'scrollLeft' : 'scrollTop'; } function scroll(event) { event.preventDefault(); // Use the original event object to access WheelEvent properties this[dirProp] += (event.originalEvent.deltaY); } jQuery(".resultlist").on('wheel', scroll); jQuery(window).on('resize', debounce(resizeForm)); resizeForm(); }); .resultlist { position: relative; width: 200px; height: 200px; overflow: auto; } .list-content { position: relative; height: 500px; width: 500px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="resultlist"> <div class="list-content">Text</div> </div> El código usa WheelEvent estándar y un antirrebote para evitar que el evento de cambio de tamaño se maneje continuamente (el evento de cambio de tamaño se activa decenas de veces por segundo durante el cambio de tamaño). El controlador de cambio de tamaño actualiza las variables width y dirProp , que luego se usan en el controlador WheelEvent para determinar de qué manera desplazar el elemento (con la notación de corchete puede usar una variable como nombre de propiedad).
Es notable que el modo estricto es imprescindible con este código, de lo contrario, el antirrebote podría consumir más tiempo del que se proponía ahorrar.
Es posible que desee agregar algún tipo de función de "desplazamiento a casa" para restablecer el elemento desplazable cuando se cambia el tamaño de la ventana. Puede probar el código en jsFiddle .