Question

我有一个带歌曲歌词的div，按下按钮滚动。这工作正常。我现在正试图让其他功能运气很少。

如果我再次单击暂停按钮，我想有按钮暂停当前位置的滚动并从该位置开始，停止滚动并重置为歌词的开头，加快滚动速度并减慢滚动速度。

我还没有真正开始加速和减慢比特，但我已经尝试了很多暂停和停止的事情。到目前为止没有运气。

这是我正在使用的滚动码：

$('#lyricsauto').click(function() {
  var div = $('#lyricwrap');
  setInterval(function() {
    var pos = div.scrollTop();
    div.scrollTop(pos + 1);
  }, 800);
});

我还设置了一个jsfiddle来玩，其中包括我尝试过的许多内容。

我找到了许多停止scrolltop的例子，但在这种情况下它们似乎都不起作用。我知道这有很多问题，所以我感谢你提供的任何帮助。

Answer 1

实现此目的的最简单方法是存储对间隔的引用，然后在暂停/停止操作中使用clearInterval()来结束它。

您还可以使用单个变量来控制滚动的数量，然后您可以在加速/减速按钮的处理程序中增加或减少。试试这个：

var interval, scrollInc = 1, $div = $('#lyricwrap');

$('#lyricsauto').click(function() {
  interval = setInterval(function() {
    var pos = $div.scrollTop();
    $div.scrollTop(pos + scrollInc);
  }, 800);
});

$("#pausescroll").click(function() {
  clearInterval(interval);
});

$("#stopscroll").click(function() {
  clearInterval(interval);
  scrollInc = 1;
  $div.scrollTop(0);
});

$('#fasterscroll').click(function() {
  scrollInc++;
})

$('#slowerscroll').click(function() {
  scrollInc = Math.max(1, --scrollInc);
})

#lyricwrap {
  position: fixed;
  height: 560px;
  width: 500px;
  overflow: hidden;
  overflow-y: auto;
  overflow-x: hidden;
}

#lyricstop {
  position: fixed;
  top: 120px;
  height: 50px;
  width: 500px;
}
#lyricstop button {
  width: 90px;
  float: left;
}

#pre {
  vertical-align: top;
  white-space: pre-line;
  font: bold 12px Verdana, Arial, sans-serif;
  text-align: center;
  padding: 30px 0 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="details">
  I have only been working on the pause and stop functions so far, I really want to get the others working too, but at least pause and stop. Pause should pause the scroll in the current position. Stop should Reset the lyrics at the start and not scroll
  anymore. Speed up should speed up the scroll by x amount... not sure how much yet. Slow down should slow the scroll down by x amount.
</div>

<div id="rightbox">
  <div id="lyricwrap">
    <div id="lyricstop">
      <button id="lyricsauto">Auto Scroll</button>
      <button id="pausescroll">pause scroll</button>
      <button id="stopscroll">stop scroll</button>
      <button id="fasterscroll">speed up</button>
      <button id="slowerscroll">slow down</button>
    </div>

    <div id="pre">Lyrics for the current<br> playing song<br> are here<br> this div<br> could be any length<br> Lyrics for the current<br> playing song<br> are here<br> this div<br> could be any length<br> Lyrics for the current<br> playing song<br> are here<br> this
      div
      <br> could be any length<br> Lyrics for the current<br> playing song<br> are here<br> this div<br> could be any length<br> Lyrics for the current<br> playing song<br> are here<br> this div<br> could be any length<br> Lyrics for the curren Lyrics
      for the current<br> playing song<br> are here<br> this div<br> could be any length<br> Lyrics for the current<br> playing song<br> are here<br> this div<br> could be any length<br> Lyrics for the current<br> playing song<br> are here<br> this div<br>      could be any length<br> Lyrics for the current<br> playing song<br> are here<br> this div<br> could be any length<br> Lyrics for the current<br> playing song<br> are here<br> this div<br> could be any length<br> Lyrics for the current<br> playing
      song
      <br> are here<br> this div<br> could be any length<br> playing song<br> are here<br> this div<br> could be any length<br> Lyrics for the current<br> playing song<br> are here<br> this div<br> could be any length<br> Lyrics for the current<br> playing
      song<br> are here<br> this div<br> could be any length<br> Lyrics for the current<br> playing song<br> are here<br> this div<br> could be any length<br> Lyrics for the current<br> playing song<br> are here<br> this div<br> could be any length<br>      Lyrics for the current<br> playing song<br> are here<br> this div<br> could be any length<br> Lyrics for the current<br> playing song<br> are here<br> this div<br> could be any length<br>
    </div>
  </div>

另请注意，我稍微整理了一下CSS。

div中的ScrollTop？我可以暂停，停止，加速和减慢滚动速度吗？

1 个答案: