如何在不滚动iframe的情况下显示网页的“头部”？

Posted 2021-05-06

很多时候我只对第一部分感兴趣，并希望制作一个“拼贴画”，比如在附近的车站到达公共汽车并且更适合小屏幕。我发现我可以使用“iframe”，但将光标放在框架中当然会滚动框架而不是向下滚动我的网页。只是为了变化我也包括一个图像。

是否有更好的方式发布网页的“头”？ （我可能对CSS和Bootstrap等知之甚少）

在这里运行代码段仅显示流量凸轮，但将其粘贴到例如http://htmledit.squarefree.com/或本地html文件中运行就好了。 https://codepen.io/pen/显示pugetsound“拒绝连接”。

<div class="thumbnail-container">

   <iframe height="260px" width="322px" src="http://pugetsound.onebusaway.org/where/iphone/stop.action?id=1_14961" frameborder="0"></iframe>

   <iframe height="260px" width="322px" src="http://pugetsound.onebusaway.org/where/iphone/stop.action?id=1_15540" frameborder="0"></iframe>

   <img src="http://www.seattle.gov/trafficcams/images/WSB_Midspan_EW.jpg" width="400" />   <!-- or a placekitten.com ;-)  -->

   <iframe height="260px" width="322px" src="http://pugetsound.onebusaway.org/where/iphone/stop.action?id=1_19930" frameborder="0"></iframe>

</div>

只是为了表明我经常遇到的其他示例应用程序将是接下来2天的天气，或者过去几天的温度。上面的答案可以解决许多问题。

身高= 380px http://forecast.weather.gov/MapClick.php?lat=47.578&lon=-122.403&FcstType=text&TextType=2

身高120px https://atmos.washington.edu/~neal/uwp/index72.cgi

答案

如果问题是您不希望iFrame滚动，您可以尝试：

<iframe src="" scrolling="no"></iframe>

iframe { overflow:hidden; }