Javascript 替换浏览器滚动的自定义按钮--保持和连续滚动？

我有替换浏览器滚动条的自定义按钮。这样的想法是，在一个页面中滚动过大的元素不会导致页面上出现十几个滚动条

见：

由于我必须显示一些代码示例（根据一些SO错误消息），请参见以下内容：

$('.right').on('click', function(event) {
   var target = $(".image-container");
   var current_x = target.scrollLeft();

   if( target.length ) {
      event.preventDefault();
      $(target).animate({
         scrollLeft: current_x+100
      }, 500);
   }
});

它非常简单，基本上它获取父对象的当前滚动位置，并根据单击的方向向其添加x

然而，更进一步，我想让它模仿保持和连续滚动，但我不知道如何做到这一点

1） 鼠标保持事件的名称是什么？（好的，这部分已经回答了，有人从副本中指出，这部分被称为MouseDown）

---

2） 连续滚动被称为什么，我怎样才能模仿浏览器的连续滚动呢

您需要在mousedown上设置一个间隔，然后清除mouseup上的间隔，就像在本章中对left和right所做的那样

相关的代码更改是，我们删除了click事件，并将其替换为

$('.left').on('mousedown', function(event) {
        ... scroll code ...
        interval = setInterval(function(){
        ... scroll code ...
        },500);
    })
    .on('mouseup',function(){clearInterval(interval);});

---

您只需在

setInterval（）

回调中重复调用

.animate（）

（将easing设置为

线性

，以实现平滑移动）。只需将间隔安排为等于动画持续时间，以便下一个动画刚好在上一个动画结束时开始

或者，更好的办法是缩短间隔（例如，50毫秒或更短），只需调用

.prop（）

而不是

.animate（）

，即可有效地执行自己的动画。（无论如何，jQuery就是这样在内部实现动画的。）

无论如何，以下是支持平滑连续滚动的方法：

var speed_x = 0, speed_y = 0;
var timer = null;
var target = $(".image-container");

function scroll() {
    if (speed_x == 0 && speed_y == 0) return;
    var current_x = target.scrollLeft();
    var current_y = target.scrollTop();            
    target.prop({
        scrollLeft: current_x - speed_x,
        scrollTop:  current_y - speed_y
    });
}

$('.control').on('mouseover mouseout', function (event) {
    var $this = $(this);
    var speed = (event.type == 'mouseover' ? 10 : 0)
    if ($this.hasClass('left'))  speed_x = +speed;
    if ($this.hasClass('right')) speed_x = -speed;
    if ($this.hasClass('up'))    speed_y = +speed;
    if ($this.hasClass('down'))  speed_y = -speed;
}).on( 'mousedown', function () {
    scroll();
    if (timer !== null) clearInterval(timer);
    timer = setInterval(scroll, 50);
    return false;
});
$(document).on('mouseup', function () {
    if (timer !== null) clearInterval(timer);
    timer = null;
});

注意如何在

mousedown

和

mouseup

处理程序中启动和停止动画，但移动方向设置为

mouseover

和

mouseout

。这允许您在按住鼠标的同时，通过将光标从一个边缘拖动到另一个边缘来更改滚动方向

---

（要获得额外积分，请在滚动区域的各个角落添加div，例如，

class=“control up left”

，以便在这些角落上按住鼠标可以沿对角线滚动。上面的JS代码已经支持它。）

可能重复的@imtheman：最多可以回答问题1。。。我还需要回答问题2谢谢。非常聪明