Question

我已经在网上查看过几个教程和一些类似的问题，但是没能弄清楚如何让屏幕左右自动滚动，以便#sheep保持在屏幕的中心。

我正在使用javascript和jquery在屏幕上移动一个简单的div。

这是我的jsfiddle

使屏幕跟随我的div的最佳方法是什么？

Answer 1

我认为你正试图左/右移动错误的元素。我想你需要把你的羊留在屏幕中间然后移动背景。

类似的东西：

var walkLeft = function() {
    $('#background').animate({left:"-=10px",top:"-=2px"}, 100);
    $('#background').animate({left:"-=10px",top:"+=2px"}, 100);
};

var walkRight = function() {
    $('#background').animate({left:"+=10px",top:"-=2px"}, 100);
    $('#background').animate({left:"+=10px",top:"+=2px"}, 100);
};

http://jsfiddle.net/CkkVr/22/（你需要＆＃34;向右跳＆＃34;看到羊），但你得到了一般的想法！

Answer 2

你需要类似的东西：

function scrollContainer() {
    var $sheep = $("#sheep");
    $("body").scrollLeft($sheep.position().left + $sheep.width());
}

这利用了jQuery的scrollLeft()函数以及position()函数（在绵羊上）。

你需要不断弄乱数学，直到它正常运作......

我在这里的“跳转”功能上实现了它： http://jsfiddle.net/Dxe8a/11/

function scrollContainer() {
    var $sheep = $("#sheep");
    var $body = $("body");
    var windowWidthOver2 = ($(window).width()/2);
    var pos = $sheep.position().left + windowWidthOver2 - $sheep.width() - 80;
    if($body.width() <= (pos + windowWidthOver2 - $sheep.width() - 80)) {
        $body.width($body.width() + windowWidthOver2);
    }
    $body.scrollLeft(pos);
}

你应该改变它以使它看起来好一点，但至少它会跟你的羊有所不同。

P.S.如果你在“/ show”中查看它，它在小提琴中效果更好：http://jsfiddle.net/Dxe8a/11/show

如何实现自动滚动以跟随我的div

2 个答案: