我有一个页面,其中滚动条移动且背景与滚动条一起移动,而navbar(header)不变。同时,正文中的文本隐藏在导航栏下方。背景对于导航栏和文本都是通用的。我想做的是,我想将“静态容器”中的文本移至iframe。是否可以同时使用iframe和首页的滚动条?在我张贴的小提琴中,只有适用于文本的垂直滚动条。我可以整个页面获取它吗(单滚动条)?
//code $(document).ready(function() {
$(".content").scroll(function() {
$("body").css("background-position", "0 -" + $(this).scrollTop() + "px");
}); });
我不知道您到底需要什么,但是我有一个线索。如果我是正确的,您想将div static-container
更改为iframe
。一些简单的部分。如果我还是正确的话,如果iframe的内容滚动了,它实际上应该滚动主页吗?
有一种或两种方法可以做到这一点:
我将为选项1
和2
提供解决方案。
首先将div
重新设置为iframe
。
//HTML
<iframe onload="detectIframeCompletion()" src="/" id="static_container" class="static-container" frameborder=0 seamless="true" sandbox="allow-same-origin" style="width:100%;height:auto">
无缝允许iFrame具有透明背景,并随文档一起流动。沙箱,因此您可以使用来自相同可信来源的页面。请记住,您不能进行跨域调用。这将导致拒绝访问。
第二,您需要编码以检测页面何时完成加载。
function detectIframeCompletion()
{
var elementIframe = document.getElementById("static_container");
//Now access the iframe document via: contentDocument > documentElement (HTML-tag) > scrollHeight
document.getElementById("static_container").style.height = elementIframe.contentDocument.documentElement.scrollHeight + "px";
}
此外,我真的需要强调一点,该解决方案仅适用于静态内容。当iframe页面的内容发生更改时,需要对iframe的高度进行均等的调整。
请忽略选项1中的所有JavaScript。只需将此CSS添加到CSS中。
.content {
top:65px;
overflow: hidden;
bottom: 0px;
width: 100%;
position: fixed;
}
.content > iframe {
height: 100%;
width : 100%;
}
当iframe的内容溢出时,这只会向iframe添加一个滚动条。
当您需要在iframe下方添加内容并且只需要一个滚动条时,请使用[[使用选项1
。当所有内容都加载到iframe中时,使用选项2
。
此答案中最重要的教训:
Seamless
(或旧式allowtransparency)以使iframe与文档一起流动sandbox
启用内容(来自同一源)的访问。px
。注意:只有启用HTML5的浏览器才能正确执行此操作。对于专业:IE9 +,Firefox和Chrome。
您只需要使iFrame
自动调整大小即可。为此,您可以使用this JQuery插件根据内容高度动态调整iframe的大小。
1。从here下载
2。在网页上包含jQuery库和jQuery iframe Auto Height
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.iframe-auto-height.plugin.js"></script>
3。创建一个iFrame,然后使scrolling=no
<iframe src="photo.html" class="photo" scrolling="no" frameborder="0"></iframe>
4。调用插件,然后完成
<script>
$('iframe.photo').iframeAutoHeight({
minHeight: 240, // Sets the iframe height to this value if the calculated value is less
heightOffset: 50 // Optionally add some buffer to the bottom
});
</script>
如https://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iframe-Auto-Height.html