javascript - 暂停部分并在 div 内滚动

Question

我在一个客户网站上工作，我目前遇到了一个问题，想弄清楚如何让某些东西发挥作用。目标是在该部分暂停并继续在 iphone 内滚动，然后在 iphone 完成滚动后继续滚动。我试图在该部分使用固定位置，但显然正文继续滚动，所以我不确定这是否是正确的解决方案。我想知道 Skrollr 是否也可以提供帮助。有人有什么想法吗？

我添加了布局的 fiddle :https://jsfiddle.net/9Lm6he4j/1/

伪 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 可以将固定位置重置为相对位置该内容结束后。