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

Question

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

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

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

谢谢。

Answer 1

编辑:概念证明:

jsBin demo

当然可以:

• 您需要知道元素的宽度
• 对其应用隐藏的溢出
• 跟踪元素内的mousemove offset
• 如果鼠标位于“热点”内，则使用 scrollLeft direction -=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(); 
});