滚动（鼠标触摸边框时左/右）行为，如Windows 8，但使用jQuery

Question

我喜欢在Windows 8 Start Page上“滚动”的方式：我们只需要触摸屏幕的左边框或右边框，然后显示屏就会移动。你明白我的意思吗？

有没有办法用jQuery重现这种行为？

因此，当我将鼠标光标移动到页面的右边框时，页面会自动向右滚动。

感谢。

Answer 1

编辑：概念验证：

jsBin demo

当然可以：

• 您需要知道元素的宽度
• 应用隐藏的溢出
• 跟踪元素mousemove
中的offset
• 如果鼠标位于“热点”内，请使用scrollLeft 方向 -=15 +=15动画
• 动画像.stop().animate({scrollLeft: direction },200, 'linear', loop);（其中loop是您的函数名称回调）

jQuery的：

var direction = '';
function loop(){
  $('#movable').stop().animate({scrollLeft: direction },200,'linear',loop);
}

var movableW = $('#movable').width();

$('#movable').on('mousemove',function( e ){

  var ofs = $(this).offset();
  var pos = {X: e.pageX-ofs.left};

  if( pos.X < 20){
     direction = '-=20';
     loop();
  }else if(pos.X > movableW-20){
     direction = '+=20';
     loop();
  }else{
     $(this).stop();
  }

}).on('mouseleave', function(){
  $(this).stop(); 
});