Stop auto-scroll on hover
Question
using the snippet below, the tag div will auto scroll every 0.5 second.
quadroDeAvisos = document.getElementById("quadroDeAvisos") lineUp = document.getElementById("lineUp") avisos = lineUp.getElementsByClassName("avisos") var count = 0; var limite = avisos.length -1; var myVar=setInterval(function(){atualiza()},500); function atualiza() { if(count == limite) count = 0; lineUp.style.marginTop = 62*count*(-1)+"px" count++ }
.quadroDeAvisos{ width: 134px; height: 125px; overflow: hidden; } #quadroDeAvisos .avisos { background-color: #ee9d20; border-color: #ba7c18; } .avisos { display: inline-block; margin-bottom: 0; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; margin-top: 5px; margin-bottom: 5px; position: relative; color: #fff; height: 50px; width: 132px; font-size: 12px; padding: 0; overflow: hidden; } .avisos p { padding: 0; margin: 5px 0; } .lineUp{ transition: 1s; }
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Auto Scroll</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css'> </head> <body> <div class="quadroDeAvisos" id="quadroDeAvisos" style="margin-top: 0px; width: 25%; height: 160px; border: 0; overflow: hidden; overflow-y: scroll;"> <div class="lineUp" id="lineUp"> <div class="avisos"> <p>LOTERICA BOA SORTE</p> <p>#Lotes : 4.957</p> </div> <div class="avisos"> <p>TREVO DA SORTE</p> <p>#Lotes : 4.399</p> </div> <div class="avisos"> <p>LOTERICA PE QUENTE</p> <p>#Lotes : 3.602</p> </div> <div class="avisos"> <p>LOTERIA BOA SORTE</p> <p>#Lotes : 3.066</p> </div> <div class="avisos"> <p>MEGA SORTE</p> <p>#Lotes : 3.066</p> </div> <div class="avisos"> <p>PONTO DA SORTE</p> <p>#Lotes : 2.468</p> </div> <div class="avisos"> <p>LOTERICA TREVO DA SORTE</p> <p>#Lotes : 2.385</p> </div> <div class="avisos"> <p>LOTERICA CENTRAL</p> <p>#Lotes : 2.208</p> </div> <div class="avisos"> <p>NOVA LOTERICA BARIRI</p> <p>#Lotes : 2.178</p> </div> <div class="avisos"> <p>LOTERICA MEGA SORTE</p> <p>#Lotes : 2.165</p> </div> <div class="avisos"> <p>CASA DA SORTE</p> <p>#Lotes : 2.123</p> </div> <div class="avisos"> <p>SORTE GRANDE</p> <p>#Lotes : 1.935</p> </div> <div class="avisos"> <p>TREVO LOTERIAS</p> <p>#Lotes : 1.822</p> </div> <div class="avisos"> <p>ESTRELA DA SORTE</p> <p>#Lotes : 1.719</p> </div> <div class="avisos"> <p>LOTERICA AVENIDA</p> <p>#Lotes : 1.543</p> </div> <div class="avisos"> <p>LOTERICA DA SORTE</p> <p>#Lotes : 1.311</p> </div> <div class="avisos"> <p>LOTERICA BRASIL</p> <p>#Lotes : 1.257</p> </div> <div class="avisos"> <p>LOTERICA VITORIA</p> <p>#Lotes : 920</p> </div></div></div> </body> </html>
What I want to happen is, I want it to stop auto scrolling on mouse over so that the user can manually scroll it. Can someone walked me thru on how can I get this done or any link that might help? Would greatly appreciate any response/help. Thanks!
1 answers
solution1
0 ACCPTED 2018-12-05 03:44:44
You could try setting a boolean to false. Then I'd recommend adding event listener sto the var avisos . One for mouseover and another for mouseout . Inside the function that is called toggle a boolean. Lastly before your atualiza(); function is called check to see if the boolean is true. If it is true return. I've added my example with a few comments. I hope this helps :).
quadroDeAvisos = document.getElementById("quadroDeAvisos"); lineUp = document.getElementById("lineUp"); avisos = document.querySelectorAll(".avisos"); var count = 0; var limite = avisos.length - 1; // set the boolean to false initially var isPaused = false; // loop thru the HTMLCollection avisos.forEach(function(x) { // add event listeners x.addEventListener("mouseover", pauseScroll); x.addEventListener("mouseout", pauseScroll); }) var myVar = setInterval(function(event) { if (isPaused) return; atualiza(); }, 500); function pauseScroll(event) { // toggle boolean var isPaused = !isPaused; } function atualiza() { if (count == limite) count = 0; lineUp.style.marginTop = 62 * count * -1 + "px"; count++; }
.quadroDeAvisos { width: 134px; height: 125px; overflow: hidden; } #quadroDeAvisos .avisos { background-color: #ee9d20; border-color: #ba7c18; } .avisos { display: inline-block; margin-bottom: 0; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; margin-top: 5px; margin-bottom: 5px; position: relative; color: #fff; height: 50px; width: 132px; font-size: 12px; padding: 0; overflow: hidden; } .avisos p { padding: 0; margin: 5px 0; } .lineUp { transition: 1s; }
<div class="quadroDeAvisos" id="quadroDeAvisos" style="margin-top: 0px; width: 25%; height: 160px; border: 0; overflow: hidden; overflow-y: scroll;"> <div class="lineUp" id="lineUp"> <div class="avisos"> <p>LOTERICA BOA SORTE</p> <p>#Lotes : 4.957</p> </div> <div class="avisos"> <p>TREVO DA SORTE</p> <p>#Lotes : 4.399</p> </div> <div class="avisos"> <p>LOTERICA PE QUENTE</p> <p>#Lotes : 3.602</p> </div> <div class="avisos"> <p>LOTERIA BOA SORTE</p> <p>#Lotes : 3.066</p> </div> <div class="avisos"> <p>MEGA SORTE</p> <p>#Lotes : 3.066</p> </div> <div class="avisos"> <p>PONTO DA SORTE</p> <p>#Lotes : 2.468</p> </div> <div class="avisos"> <p>LOTERICA TREVO DA SORTE</p> <p>#Lotes : 2.385</p> </div> <div class="avisos"> <p>LOTERICA CENTRAL</p> <p>#Lotes : 2.208</p> </div> <div class="avisos"> <p>NOVA LOTERICA BARIRI</p> <p>#Lotes : 2.178</p> </div> <div class="avisos"> <p>LOTERICA MEGA SORTE</p> <p>#Lotes : 2.165</p> </div> <div class="avisos"> <p>CASA DA SORTE</p> <p>#Lotes : 2.123</p> </div> <div class="avisos"> <p>SORTE GRANDE</p> <p>#Lotes : 1.935</p> </div> <div class="avisos"> <p>TREVO LOTERIAS</p> <p>#Lotes : 1.822</p> </div> <div class="avisos"> <p>ESTRELA DA SORTE</p> <p>#Lotes : 1.719</p> </div> <div class="avisos"> <p>LOTERICA AVENIDA</p> <p>#Lotes : 1.543</p> </div> <div class="avisos"> <p>LOTERICA DA SORTE</p> <p>#Lotes : 1.311</p> </div> <div class="avisos"> <p>LOTERICA BRASIL</p> <p>#Lotes : 1.257</p> </div> <div class="avisos"> <p>LOTERICA VITORIA</p> <p>#Lotes : 920</p> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Auto-Scroll in FireFox
Auto-scroll to section
Auto-scroll textarea in iframe
overflow hidden auto-scroll
Auto-scroll <textarea> with Javascript
Auto-scroll to the bottom of a div
Textarea auto-scroll to the bottom
Auto-scroll to bottom of the messages
Javascript auto-scroll to div
Auto scroll images on page load, stop on hover
Related Tags