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

Question

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

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

这是我的jsfiddle

http://jsfiddle.net/JosephByrne/CkkVr/

使屏幕跟随我的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/ （你需要“向右跳”才能看到羊），但是你得到了一般的想法！

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

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

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