CODEWITHSUNDEEP
htmlcssiframescrollbar
And Finally
And Finally

Reputation: 5704

How does this site hide the iframe scrollbar?

I'm trying to reproduce how this mobile emulator site renders a page in an iframe without scrollbars. I've tried copying all the CSS for the iframe and .frame-scroller containers, but no luck. I'm viewing on OSX Chrome.

Can anybody explain how they are doing it, or suggest a CSS-only way to avoid scrollbars while keeping the possibility to scroll?

body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.3);
}
.mobile-preview-window {
  margin-top: 20px;
  overflow: hidden;
  cursor: pointer;
}
.ump-device-container {
  top: 0;
  margin: auto;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
}
.ump-iframe {
  margin: auto;
  display: block;
  overflow: hidden;
}
.ump-device-iphone-5 {
  background-image: url('iphone-5.png');
  width: 378px;
  height: 809px;
  overflow: hidden;
  text-align: center;
}
.frame-scroller {
  display: inline-block;
  width: 320px;
  height: 568px;
  margin: 20px auto 0;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  outline: 1px solid orangered;
}
.ump-device-iphone-5 iframe {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  background-color: rgb(255, 255, 255);
}
<div class="mobile-preview-window">
  <div class="ump-device-container ump-device-iphone-5">
    <div class="frame-scroller">
      <iframe class="ump-iframe" src="http://news.bbc.co.uk"></iframe>
    </div>
  </div>
</div>

Upvotes: 0

Views: 1013

Answers (1)

Tanel Eero
Tanel Eero

Reputation: 652

iframe::-webkit-scrollbar {
    display: none;
}

You can read more about this approach from this article - https://css-tricks.com/custom-scrollbars-in-webkit/

Upvotes: 1

Related Questions