Question

我试图重现这个mobile emulator site如何在没有滚动条的iframe中呈现网页的方式。我已经尝试复制iframe和.frame-scroller容器的所有CSS，但没有运气。我在OSX Chrome上观看。

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 1

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

您可以在本文中详细了解此方法 - https://css-tricks.com/custom-scrollbars-in-webkit/

该网站如何隐藏iframe滚动条？

1 个答案: