Question

我已经创建了一种带有自定义滚动条的菜单系统，但是我想使其连续进行，这样，如果有人按住向上或向下按钮，它将不断滚动，直到他们释放鼠标为止。

我当时正在考虑尝试使用一个计时器，以便它每秒钟可以滚动很多像素，但是如果有一种方法可以使它不那么跳动，那就太好了。

对此将提供任何帮助或帮助。

$("#up_arrow").bind("mousedown", function(){
  var current_position = parseInt($("#scroll").scrollTop());
  $("#scroll").scrollTop(current_position - 100);
});

$("#down_arrow").bind("mousedown", function(){
  var current_position = parseInt($("#scroll").scrollTop());
  $("#scroll").scrollTop(current_position + 100);
});

ul{
  list-style:none;
  margin:0px;
  padding:0px;
  width:150px;
}
#scroll{
  height: 300px;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li><center><button id="up_arrow">Up</button></center></li>
<li>
  <ul id="scroll">
  <li><img src="http://via.placeholder.com/150x50/ff0000"></li>
  <li><img src="http://via.placeholder.com/150x50/00ff00"></li>
  <li><img src="http://via.placeholder.com/150x50/0000ff"></li>
  <li><img src="http://via.placeholder.com/150x50/ff0000"></li>
  <li><img src="http://via.placeholder.com/150x50/00ff00"></li>
  <li><img src="http://via.placeholder.com/150x50/0000ff"></li>
  <li><img src="http://via.placeholder.com/150x50/ff0000"></li>
  <li><img src="http://via.placeholder.com/150x50/00ff00"></li>
  <li><img src="http://via.placeholder.com/150x50/0000ff"></li>
  <li><img src="http://via.placeholder.com/150x50/ff0000"></li>
  <li><img src="http://via.placeholder.com/150x50/00ff00"></li>
  <li><img src="http://via.placeholder.com/150x50/0000ff"></li>
  <li><img src="http://via.placeholder.com/150x50/ff0000"></li>
  <li><img src="http://via.placeholder.com/150x50/00ff00"></li>
  <li><img src="http://via.placeholder.com/150x50/0000ff"></li>
  </ul>
</li>
<li><center><button id="down_arrow">Down</button></center></li>
</ul>

Answer 1

我将JS更改为以下代码，并得到了我想要的结果：

var timeoutId1 = 0;
var timeoutId2 = 0;

$('#up_arrow').on('mousedown', function() {
    scrollup();
}).on('mouseup mouseleave', function() {
    clearTimeout(timeoutId1);
});

$('#down_arrow').on('mousedown', function() {
    scrolldown();
}).on('mouseup mouseleave', function() {
    clearTimeout(timeoutId2);
});

function scrollup(){
	var current_position = parseInt($("#scroll").scrollTop());
  $("#scroll").scrollTop(current_position - 100);
  timeoutId1 = setTimeout(function(){scrollup()} , 300);
}

function scrolldown(){
	var current_position = parseInt($("#scroll").scrollTop());
  $("#scroll").scrollTop(current_position + 100);
  timeoutId2 = setTimeout(function(){scrolldown()} , 300);
}

ul{
  list-style:none;
  margin:0px;
  padding:0px;
  width:150px;
}
#scroll{
  height: 300px;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li><center><button id="up_arrow">Up</button></center></li>
<li>
  <ul id="scroll">
  <li><img src="http://via.placeholder.com/150x50/ff0000"></li>
  <li><img src="http://via.placeholder.com/150x50/00ff00"></li>
  <li><img src="http://via.placeholder.com/150x50/0000ff"></li>
  <li><img src="http://via.placeholder.com/150x50/ff0000"></li>
  <li><img src="http://via.placeholder.com/150x50/00ff00"></li>
  <li><img src="http://via.placeholder.com/150x50/0000ff"></li>
  <li><img src="http://via.placeholder.com/150x50/ff0000"></li>
  <li><img src="http://via.placeholder.com/150x50/00ff00"></li>
  <li><img src="http://via.placeholder.com/150x50/0000ff"></li>
  <li><img src="http://via.placeholder.com/150x50/ff0000"></li>
  <li><img src="http://via.placeholder.com/150x50/00ff00"></li>
  <li><img src="http://via.placeholder.com/150x50/0000ff"></li>
  <li><img src="http://via.placeholder.com/150x50/ff0000"></li>
  <li><img src="http://via.placeholder.com/150x50/00ff00"></li>
  <li><img src="http://via.placeholder.com/150x50/0000ff"></li>
  </ul>
</li>
<li><center><button id="down_arrow">Down</button></center></li>
</ul>

jQuery-鼠标按下时的连续动画

1 个答案: