暂停部分并在div中滚动 [英] Pause section and scroll inside a div

问题描述

我正在一个客户端站点上工作，目前在解决如何使某些事情正常工作方面遇到问题.目标是在该部分暂停并继续在iphone内滚动，然后在iphone完成滚动后继续滚动.我试图使用固定在该部分上的位置，但是很明显，主体会继续滚动，因此我不确定这是否是正确的解决方案.我想知道这是否也是Skrollr可以协助的事情.有人有什么想法吗?

I'm working on a client site and i'm currently having an issue firguring out how to make something work. the goal is to pause at the section and continue to scroll inside the iphone then continue to scroll once the iphone has finished scrolling. I have attempted to use position fixed on the section but obviously the body continues to scroll so I'm not sure if this is the right solution. I was wondering if this is something Skrollr could assist with as well. Does anyone have any ideas?

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

I've added a fiddle of the layout: 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;
}

推荐答案

您可以尝试 ScrollMagic .它在 https://github.com/janpaepke/ScrollMagic

这篇关于暂停部分并在div中滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！