javascript - 自定义按钮取代浏览器滚动——按住并连续滚动？

Question

我有取代浏览器滚动条的自定义按钮。这个想法是为了使页面中的超大元素滚动不会导致页面上出现十几个滚动条。

参见:https://jsfiddle.net/bwgxs6ng/

由于我必须显示一些代码示例(根据一些 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)连续滚动被称为什么，我怎样才能做一些模仿浏览器连续滚动的事情？

Answer 1

您可以在 setInterval() 回调中重复调用 .animate()(将缓动设置为 线性，以实现平滑移动) 。只需将间隔设置为等于动画持续时间，以便下一个动画在上一个动画结束时开始。

或者，更好的是，缩短间隔(例如 50 毫秒或更短)并仅调用 .prop() 而不是 .animate()，从而有效地执行你自己的动画。 (无论如何，这就是 jQuery 在内部实现动画的方式。)

无论如何，这是how I'd rewrite your code支持平滑连续滚动:

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 处理程序中启动和停止的，但移动的方向是在 上设置的鼠标悬停和鼠标悬停。这允许您在按住鼠标的同时将光标从一个边缘拖动到另一边缘来更改滚动方向。

(为了获得奖励积分，请在滚动区域的 Angular 落添加带有 class="control up left" 的 div，这样将鼠标按住这些 Angular 落将允许您对 Angular 滚动。上面的JS代码已经支持了。)