这个网站如何隐藏 iframe 滚动条？

Question

我正在尝试重现此 mobile emulator site 如何在没有滚动条的 iframe 中呈现页面。我试过为 iframe 和 .frame-scroller 容器复制所有 CSS，但没有成功。我正在 OSX Chrome.

上观看

任何人都可以解释他们是如何做到的，或者建议一种 CSS 唯一的方法来避免滚动条同时保持滚动的可能性吗？

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>

Answer 1

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

您可以从这篇文章中阅读有关此方法的更多信息 - https://css-tricks.com/custom-scrollbars-in-webkit/

这个网站如何隐藏 iframe 滚动条？

How does this site hide the iframe scrollbar?

html

css

iframe

scrollbar