我正在尝试重现此移动模拟器网站如何在无滚动条的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>iframe::-webkit-scrollbar {
display: none;
}
您可以从本文中了解有关此方法的更多信息-https: //css-tricks.com/custom-scrollbars-in-webkit/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句