在overflow：none元素（jQuery）中自动滚动内容

我在overflow：none元素中混合了内容（图像，文本）。 现在，我想根据鼠标指针的位置在x / y轴上自动滚动该内容。 溢出：auto不是一个选项，因为我不想在该元素中显示/使用滚动条。

我找到了一个类似的脚本，但只有背景图片。 有没有办法产生类似的效果，但移动div的整个内容？ 提前感谢您的回答！

             $(document).ready(function(){ var vH=$('#viewer').height(); var vW=$('#viewer').width(); var vT=$('#viewer').offset().top; var vL=$('#viewer').offset().left; $('#viewer').mousemove(function(e){ var ypos=e.pageY-vT; var xpos=e.pageX-vL; var y=Math.round(ypos/vW*100); var x=Math.round(xpos/vH*100); $('#test').val(x+' , '+y); $('#viewer').css({backgroundPosition: x+'% '+y+'%'}); }); });    
Test Move Background on Mousemove:
 
 
    

Answer 1

这是一个有趣的！ 更改它，以便您移动scrollTop和scrollLeft而不是背景位置。 由于你有百分比，你可以像这样计算scrollTop和scrollLeft 。 看看小提琴 。

 $(document).ready(function(){ var viewer = $('#viewer'), vH = viewer.height(), vW = viewer.width(), vT = viewer.offset().top, vL = viewer.offset().left, sTop = viewer.find(':first').height() + 18 - vH, sLeft = viewer.find(':first').width() + 18 - vW; // the sTop and sLeft could be calculated differently. In this case // I am assuming that the viewer has a single child that is larger than itself. // realistically this should check total possible scrollTop and scrollLeft $('#viewer').mousemove(function(e){ var $this = $(this), y = (e.pageY-vT)/vH, x = (e.pageX-vL)/vW; $this.scrollTop(Math.round(sTop * y)) .scrollLeft(Math.round(sLeft * x)); }); });