暂停部分并在div内滚动

Question

我正在开发一个客户端网站，我目前正在解决如何使某些工作成功的问题。目标是暂停在该部分并继续在iphone内滚动，然后在iphone完成滚动后继续滚动。我试图使用固定在该部分的位置，但显然身体继续滚动所以我不确定这是否是正确的解决方案。我想知道Skrollr是否可以提供帮助。有没有人有任何想法？

我添加了布局的小提琴：https://jsfiddle.net/9Lm6he4j/1/

Psuedo HTML：

<section>
    <div class="iphone_wrap">
        <div class="iphone_inner">
            <!--Message content-->
        </div>
    </div>
</section>

CSS：

section {
   position:relative;
   min-height:500px;
   width:100%;
}

.iphone_wrap {
    width:400px;
    height:650px;
    position:absolute;
    left:20%;
    top:-200px;
    background:url('iphone.jpg');
}

.iphone_inner {
    position:relative;
    margin:0 auto;
    overflow:scroll;
}

Answer 1

你可以做到这一点的方法是

• 使用javascript / jquery并设置固定的“蓝色” 部分“和”iphone包装“

  在手机内部运行的内容作为其中的一部分 页面的底层主体

  所以蓝色部分+ iphone包装器将作为叠加层使用 本部分下方的iphone滚动内容

  并使用js / jquery可以重置固定为relative的位置 在该内容结束后。

Answer 2

您可以尝试可能对您有用的ScrollMagic。它具有非常详细的文档和作者对https://github.com/janpaepke/ScrollMagic

的良好支持