时间戳

首页 > 解决方案 > 悬停时停止自动滚动

javascript - 悬停时停止自动滚动

问题描述

使用下面的代码片段，标签 div 将每 0.5 秒自动滚动一次。

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>

我想要发生的是，我希望它在鼠标悬停时停止自动滚动，以便用户可以手动滚动它。有人可以告诉我如何完成这项工作或任何可能有帮助的链接吗？非常感谢任何回应/帮助。谢谢！

标签： javascripthtmlcssscroll

解决方案

您可以尝试将布尔值设置为 false。然后我建议将事件侦听器添加到 var avisos。一为mouseover，一为mouseout。在称为切换布尔值的函数内部。最后在atualiza();调用函数之前检查布尔值是否为真。如果是真的返回。我在示例中添加了一些评论。我希望这有帮助 ：）。

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>

推荐阅读