javascript - 如何使用图像作为框架，并在里面滚动？在网站上模拟电话

Question

我不确定这叫做什么，但是开发人员如何实现能够拥有一个空心的 Nexus 手机图像，然后在其中滚动内容？这是一种模拟产品在现实生活中如何工作的巧妙方法，那么如何实现呢？

这是一个例子，大约在页面的中间位置。

http://grupoweb.upf.edu/innova/q_kly/#step-6

@silversunhunter

我能够显示两个图像，但内容似乎完全遮住了父 div。我测量了图像并且尺寸是正确的 afaik。

CSS:

.nexus5-frame {
background: url(img/nexus5frame.png);
height:640px;
width:326px;
position: relative;

}

.nexus5-content {
overflow: scroll;
height: 515px;
width: 292px;
position: absolute;
left: 26px;
top 597px;
}

HTML:

<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<div id="nexus5-frame">
<div id="nexus5-content">
<img src="img/content.png"/>                
</div>
</div>
</div>

Answer 1

需要在父div中设置图片为背景图片。然后一个正确测量的内部绝对定位的 div 可以是您的可滚动内容。

<div id="main">
     <div id="content"></div>
</div>

手机图片为345px × 661px

#main {
    background: url(/filelocation) no-repeat;
    height: 661px;
    width: 345px;
    position: relative;
}

屏幕为 305x601(假设)

#content {
    overflow: auto; /*this gives us our scroll bar when the content is longer than the div*/
    height: 601px;
    width: 305px;
    position: absolute;
    left: 20px;
    top: 30px;
}