CODEWITHSUNDEEP
javascripthtmlcssscroll
Renz C. Gohing
Renz C. Gohing

Reputation: 123

Stop auto-scroll on hover

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!

Upvotes: 0

Views: 1212

Answers (1)

Rafael
Rafael

Reputation: 5149

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>

Upvotes: 1

Related Questions