內部滾動圖像的iPhone剪影

我想使用裏面的滾動圖像覆蓋iPhone展示移動網站設計，但圖像不滾動覆蓋的iPhone頂部有我做錯了什麼，以及如何我是否修復它？內部滾動圖像的iPhone剪影

DEMO：http://jsfiddle.net/jonathanl5660/Lao36z20/

<div> 
<img src="https://dl.dropboxusercontent.com/u/9833562/iphone.png" width="370px" height="800px" style="position: absolute; "> 
</div> 
<div style="width:300px;height:700px;overflow:scroll;margin:30px; position: relitive;"> 

<img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" width="98%" height="700px" alt="" style="margin-top:150px;margin-left:10px;" /><br /> 
<br /> 

</div>

來源

2014-09-22 jl5660

我試圖編輯您的例子，但像縫的jsfiddle不在我的機器上工作得很好... 無論如何，iphone應該有一個相對位置，並且z-index：-1（以便上面的圖像完全可用）和上面的圖像應該有位置絕對與明智的利潤相關的父母（iphone） – Nick 2014-09-22 13:06:21

你可以組織你的HTML這樣的：

<div class="iphone"> 
    <div class="container"> 
     <img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" alt=""/> 
    </div> 
</div>

然後用CSS調整一下：

.iphone { 
    width:370px; 
    height:800px; 
    background:url('https://dl.dropboxusercontent.com/u/9833562/iphone.png') no-repeat center; 
    background-size:100%; 
} 
.container { 
    position:relative; 
    top:152px; 
    width:293px; 
    margin:auto; 
    max-height:496px; 
    overflow:auto; 
} 
.container img { 
    width:100%; 
}

選中此demo Fiddle

來源

2014-09-22 13:16:40 DaniP

夢幻般的，只是我想要的謝謝。 – jl5660 2014-09-22 13:22:23

我已經分叉了你的例子，並稍微嚼了一下。通過將內容保持爲恆定寬度，我們可以垂直擴展其容器，效果就好像我們只將滾動條向右移動一樣。另請注意，我們可以針對x和y軸設置溢出行爲。

這裏的的jsfiddle鏈接：

http://jsfiddle.net/74yh81s4/2/

，代碼：

<div class="position: relative"> 
<img src="https://dl.dropboxusercontent.com/u/9833562/iphone.png" width="370px" height="800px"> 
</div> 
<div style="width:340px; height:472px; overflow-x:hidden; overflow-y:scroll; margin:30px; position: absolute; top: 142px; left: 17px"> 
<img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" width="295px" alt="" /> 
</div>

問候

來源

2014-09-22 13:18:29

內部滾動圖像的iPhone剪影

回答

相關問題