Hide overflow when scrolling

Question

I'm trying to design a webpage where the page content shows within an iPhone screen but I cannot get the overflow to work correctly in that all overflow is being shown.

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>

I've put it in a jsfiddle and would appreciate to know what I've got wrong.

Many thanks

Answer 1

Maybe its work for you.

You need a container for your text and image, and play with relative and absolute positions.

Remember to hide the scrollbar, his width different between browsers and you don't want the text container change his width.

::-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