Codifiqué esto:
$("#scroll-to-left-button").on("mousedown", function() { var x = $("#scroll-area").scrollLeft(); $("#scroll-area").scrollLeft(x - 10); }); $("#scroll-to-right-button").on("mousedown", function() { var x = $("#scroll-area").scrollLeft(); $("#scroll-area").scrollLeft(x + 10); }); #container { width: 50%; height: 100px; background-color: grey; position: relative; } #scroll-area { white-space: nowrap; overflow-x: auto; height: 100%; } <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <div id="container"> <div id="scroll-area"> <div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div> </div> </div> <button id="scroll-to-left-button">Scroll to left</button> <button id="scroll-to-right-button">Scroll to right</button>Debe hacer clic en los botones con bastante frecuencia para navegar a través de este contenedor. ¿Hay alguna manera de dejarlo en función de la duración de la presión del mouse? ¿Como si mantienes el mouse presionado, continúa desplazándose constantemente? Y si te detienes, se detiene.
Sería feliz si alguien pudiera ayudarme.
Aquí hay una solución de trabajo. Además, su código estaba un poco mojado, así que lo refactoricé un poco. Solo necesita un detector de eventos mousedown.
let interval; $('.scroll-btn').on('mousedown', ({ target }) => { const type = $(target).attr('id'); interval = setInterval(() => { var x = $('#scroll-area').scrollLeft(); $('#scroll-area').scrollLeft(type === 'left' ? x - 10 : x + 10); }, 50); }); $('.scroll-btn').on('mouseout mouseup', () => clearInterval(interval)); #container { width: 50%; height: 100px; background-color: grey; position: relative; } #scroll-area { white-space: nowrap; overflow-x: auto; height: 100%; } <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <div id="container"> <div id="scroll-area"> <div id="text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div> </div> </div> <button id="left" class="scroll-btn">Scroll Left</button> <button id="right" class="scroll-btn">Scroll Right</button>Bueno, mousedown y mouseup hacen una buena pareja, aunque solo has usado mousedown :)
Aquí hay una muestra de cómo se podría hacer.
Tenga en cuenta que hay un par de otras cosas que se pueden hacer con este código para que se vea mejor:
.on(... probablemente no sea necesario, simplemente podría escribirlo como .mousedown(...move="10" para el botón derecho y move="-10" para el izquierdo, y luego obtener este valor para agregarlo a scrollLeft ) var tmr; $(".scroll-button").mousedown(function() { //let's setup the timer here... move = +$(this).attr("move"); tmr = setInterval(function(){ $("#scroll-area")[0].scrollLeft+=move; }, 250) }); $(".scroll-button").mouseup(function() { // and destroy the timer here clearInterval(tmr); }); #container { width: 50%; height: 300px; background-color: grey; position: relative; } #scroll-area { white-space: nowrap; overflow-x: auto; height: 100%; } <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <div id="container"> <div id="scroll-area"> <div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div> </div> </div> <button class="scroll-button" move="-10">Scroll to left</button> <button class="scroll-button" move="10">Scroll to right</button>