暫停部分並在div內滾動

我正在一個客戶端網站上工作，我目前正在解決如何使某些工作有問題。目標是在該部分暫停並繼續滾動iphone內部，然後在iPhone完成滾動後繼續滾動。我試圖使用固定在該部分的位置，但顯然身體繼續滾動，所以我不確定這是否是正確的解決方案。我想知道這是否也是Skrollr可以提供的幫助。有沒有人有任何想法？暫停部分並在div內滾動

我已經添加了佈局的小提琴：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; 
}

example

來源

2015-06-19 Tyler Pope

我討厭使用移動設備時的溢出滾動。我在內卷軸上「卡住」，如果內卷軸部分的高度比屏幕高，那麼特別不好，你真的被困在裏面。你爲什麼要故意爲手機做這件事？ – RightClick

你可以發佈一個問題的jsfiddle嗎？這可以通過防止瀏覽器的滾動失敗行爲在鼠標懸停之前完成，直到該部分的滾動達到底部，然後重新啓用它。 – loli

@ RightClick這將只用於該網站的桌面版本，在移動iphone容器將消失和內容將正常流動，沒有任何固定的定位。 –

一種方法是

採用javascript/jQuery和設置位置固定在「藍色部」及「iphone包裝」

含量在手機內運行的實現爲頁面的底層身體的一部分

所以藍色部分+ iphone包裝將作爲覆蓋而iPhone滾動的含量低於本節

和使用JS/jQuery的可以重新固定到相對位置該內容結束後的210。

來源

2015-06-19 13:41:41

這是一個運行的句子。你能編輯你的答案更清楚嗎？ – JAL

你可以試試ScrollMagic這可能會幫助你。它有真正詳細的文檔和作者的支持https://github.com/janpaepke/ScrollMagic

來源

2015-06-19 13:49:06

暫停部分並在div內滾動

回答

相關問題