• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

102
Views
Uso de la duración de la presión del mouse para desplazarse

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.

about 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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>

about 3 years ago · Juan Pablo Isaza Report

0

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(...
  • el código para los botones derecho e izquierdo se ve muy similar, puede unir estos bloques en uno y distinguirlos por un atributo adicional (digamos como 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>

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error