スクロール時にオーバーフローが発生しない

Question

ページのコンテンツがiPhoneの画面に表示されるウェブページをデザインしようとしていますが、すべてのオーバーフローが正しく表示されるようにオーバーフローさせることはできません。

function getWidth() { 
 
    if (self.innerWidth) { 
 
    return self.innerWidth; 
 
    } 
 

 
    if (document.documentElement && document.documentElement.clientWidth) { 
 
    return document.documentElement.clientWidth; 
 
    } 
 

 
    if (document.body) { 
 
    return document.body.clientWidth; 
 
    } 
 
} 
 

 
function getHeight() { 
 
    if (self.innerHeight) { 
 
    return self.innerHeight; 
 
    } 
 

 
    if (document.documentElement && document.documentElement.clientHeight) { 
 
    return document.documentElement.clientHeight; 
 
    } 
 

 
    if (document.body) { 
 
    return document.body.clientHeight; 
 
    } 
 
} 
 

 
function setScreen() { 
 
    var img = document.getElementById('iphone'); 
 
    //or however you get a handle to the IMG 
 
    var myWidth = getWidth(); 
 
    var width = String(Math.round(getWidth()/2 - img.clientWidth/2 + (img.clientWidth/525) * 94)) + 'px'; 
 
    var height = String(Math.round(getHeight()/2 - img.clientHeight/2 + (img.clientWidth/915) * 170)) + 'px'; 
 
    document.getElementById("screen").style.paddingTop = height; 
 
    document.getElementById("screen").style.paddingLeft = width; 
 
    document.getElementById("screen").style.paddingRight = width; 
 
    document.getElementById("screen").style.paddingBottom = height; 
 
    console.log("Image Width: " + img.clientWidth); 
 
    console.log("Screen Width: " + myWidth); 
 
    console.log("Calculated PaddingLeft: " + width); 
 
} 
 

 
window.onresize = function() { 
 
    setScreen(); 
 
} 
 
setScreen();

.screen { 
 
    padding-top: 15%; 
 
    padding-left: calc(50% - 262px); 
 
    position: absolute; 
 
    overflow: hidden; 
 
    display: block; 
 
} 
 
.phone-image { 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    margin: auto; 
 
    display: block; 
 
}

<img src='http://s11.postimg.org/vcchvwjub/iphone.jpg' id='iphone' class="phone-image"> 
 
<div id="screen" class="screen"> 
 
    <p>This is where my text goes and it should now wrap and only show within the phone, I think.</p> 
 
</div>

私はjsfiddleに入れていると私は間違って持っているかを知るためにいただければ幸いです。

多くのお礼ありがとうございます

Answer 1

多分あなたのために働いています。

テキストと画像のコンテナが必要で、相対位置と絶対位置で再生します。

スクロールバーを非表示にすることを忘れないでください。ブラウザ間の幅が異なり、テキストコンテナの幅を変更したくない場合があります。

::-webkit-scrollbar { 
 
    display: none; 
 
} 
 
body { 
 
    font-size: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
p { 
 
    font-size: 0.8em; 
 
} 
 
#container { 
 
    position: relative; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
} 
 
.screen { 
 
    overflow: scroll; 
 
    width: 60%; 
 
    height: 61%; 
 
    position: absolute; 
 
    top: 14%; 
 
    left: 20%; 
 
} 
 
.phone-image { 
 
    width: 100%; 
 
    display: block; 
 
}

<div id="container"> 
 
    <img src='http://s11.postimg.org/vcchvwjub/iphone.jpg' id='iphone' class="phone-image"> 
 
    <div id="screen" class="screen"> 
 
    <p>This is where my text goes and it should now wrap and only show within the phone, I think.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum purus id nisl tristique condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam elementum dui et turpis euismod ullamcorper. 
 
     Maecenas id tempus lectus. Duis rutrum lectus ac diam scelerisque posuere. Praesent sit amet auctor tellus, id vestibulum massa. Sed sed leo et nisl lobortis imperdiet eget sed leo.</p> 
 
    <p>Nunc augue risus, pharetra in nulla ut, posuere finibus ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse mollis erat mi, vel commodo lorem gravida in. Nulla euismod commodo leo, a egestas dolor 
 
     lacinia a. Suspendisse mattis lacus nisi, at consectetur ex auctor sed. Suspendisse potenti. Nunc hendrerit id nisl scelerisque cursus. Etiam suscipit, ipsum mollis volutpat ultricies, turpis arcu feugiat erat, et vulputate mauris velit vel leo. 
 
     Aenean ac dolor tempor, sodales nunc consectetur, gravida diam. Nulla sapien ipsum, tempus at vestibulum a, lobortis ut diam. Nam sit amet risus laoreet, mattis ex sed, semper odio. Nam sollicitudin tellus erat, ut vulputate elit bibendum ut.</p> 
 
    <p>Integer ultricies non nisi sed ultrices. Aliquam at odio accumsan, tincidunt ex nec, imperdiet magna. Vestibulum ac placerat justo. Nam facilisis tortor in tristique tincidunt. Phasellus tempor lectus eu libero dignissim, nec ultricies leo auctor. 
 
     Etiam dui tortor, faucibus id suscipit vel, aliquam non mi. Nulla non ultricies odio. Aenean at metus erat. Pellentesque eget consectetur velit, blandit pellentesque est. Nulla porta mi ligula, sit amet consequat lorem placerat ut. Ut mattis hendrerit 
 
     ex, at dapibus enim tincidunt et. Aenean quis nisl at neque porta sagittis sit amet nec mauris. Nullam libero purus, aliquet eu eleifend eget, fermentum a enim.</p> 
 
    </div> 
 
</div>

My Fiddle