在溢出中自动滚动内容：无元素（jQuery）答案

【问题标题】：Scroll content automatically in an overflow:none element (jQuery)在溢出中自动滚动内容：无元素（jQuery）
【发布时间】：2011-03-19 01:57:43
【问题描述】：

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

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

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test jQuery Move Background with Mouse Move</title>
  <link rev="made" href="mailto:covertlinks [ at ] gmail [ dot ] com" />
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <meta name="generator" content="NoteTab Pro 5.5" />
  <meta name="author" content="Perry Wolf" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
<script type="text/javascript" src="jquery.1.3.2.js"></script>
<script type="text/javascript">
$(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+'%'});
    });
});
</script>
</head>
<body style="color:#FFFFFF;background:#102030;text-align:center;">
<h1 style="text-align:center;">Test Move Background on Mousemove:</h1>
<div id="viewer" style="border:solid 1px #FFFFFF;margin:50px auto 0px auto;width:400px;height:400px;background:url(ironhide1024x768.jpg) 0% 0% no-repeat;cursor:url(target_cursor.gif), crosshair;text-align:center;line-height:300px;">
</div>
<input type="text" id="test" size="30" style="display:block;margin:10px auto;width:150px;" />
</body>
</html>

【问题讨论】：

标签： javascript jquery scrollbar scroll overflow

【解决方案1】：

这很有趣！更改它，以便移动 scrollTop 和 scrollLeft 而不是背景位置。由于您有一个百分比，您可以像这样计算scrollTop 和scrollLeft。 Check out the fiddle.

$(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));
    });
});

【讨论】：

你摇滚！ :) 非常感谢！
Josiah 的回答显然是正确的，但要小心overflow:none。溢出没有值“none”，尝试“hidden”。 w3.org/TR/CSS21/visufx.html#overflow