jquery - 滚动（鼠标触摸边框时向左/向右）行为类似于 Windows 8 但使用 jQuery

Question

我喜欢我们可以在 Windows 8 起始页上“滚动”的方式：我们只需触摸屏幕的左边界或右边界，显示屏就会移动。你明白我的意思吗？

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

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

谢谢。

Answer 1

编辑：概念证明：

jsBin 演示

你当然可以：

• 你需要知道元素的宽度
• 应用隐藏的溢出
• 跟踪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(); 
});