javascript - 停止滚动页面，滚动 div

Question

我正在创建这个着陆页:http://tag4share.com/landing/#

两个 galaxy s3 的位置(一个白色的带有“Organizador”标签，一个黑色的带有“Participante”标签)，我想停止滚动页面并自动开始滚动手机内的内容(一个 iFrame， div，任何东西)。

这可能吗？

基本上，我想“聚焦”div 内的滚动(即使光标没有悬停在上面，它也能正常工作)。或者在不滚动主体的情况下滚动时设置动画。

示例:http://www.google.com/nexus/5/

关于“捕捉重要时刻所需的一切”。部分。

我的尝试:

var lastScroll;
var currentScroll = $(window).scrollTop();

$(window).scroll(function() {

    lastScroll = currentScroll;
    currentScroll = $(window).scrollTop();

    if($(window).scrollTop() >= 2024 && $(window).scrollTop() < 2500)
    {
                var difference = currentScroll - lastScroll;
        $(".main").css({"margin-top":"-="+currentScroll});
    }
    });

我试图在滚动时移动主 div。它有效，但看起来真的很奇怪(一直在摇晃)。

谢谢!

Answer 1

我刚刚稍微整理了一下您的代码，修复了缩进等。

至于当你点击位置时实际滚动你的div，使用animate来实际模拟滚动效果，一旦你知道你已经到达底部，你可以把滚动函数中的另一个 if 语句停止重置滚动位置。

var lastScroll;
var scrollPosition = $(window).scrollTop();
var reachedBottom = false;
var phonePositionTop = $('#phoneContainerID').position().top;
var phonePositionBottom = phonePositionTop + $('#phoneContainerID').height();

$(window).scroll(function() {

    if(scrollPosition >= phonePositionTop && scrollPosition < phonePositionBottom && reachedBottom == false){
        var difference = currentScroll - lastScroll;
        // Keep resetting scroll to the phoneContainerTop position
        $(".main").css({"margin-top": phonePositionTop});
        var scrollLimit = -100;
        if ($('#phoneContainerID').position().top < scrollLimit) {
            //Once the scroll limit is less than -100 (scrolled up 100 pixels)
            // Disable our 'pause' effect, and continue
            reachedBottom = true;
        }

    }
});

我还没有对此进行测试，但我只是让您了解从这里到哪里去。

希望能帮到您一点点!