gpt4 book ai didi

javascript - 如何在固定其他框架的同时仅在一个iframe中显示滚动条?

转载 作者:太空宇宙 更新时间:2023-11-04 14:38:53 25 4
gpt4 key购买 nike

我有一个像这样的初始页面:

<body>
<iframe src = "page1.html" style="position:fixed; width:100%; height:100px; left:0; top:0 overflow:hidden"</iframe>
<iframe src = "page2.html" style="position:fixed; width:100px; height:100%; left:0; top:100px; overflow:hidden"></iframe>
<iframe src = "page3.html" style="position:absolute; width:100%; height:100%; left:100px; top:100px; overflow:scroll"></iframe>
</body>

基本上,page1 是标题,page2 是左侧的菜单,page3 是内容。

我想固定 page1 和 page2,没有任何滚动条,但只有 page3.html 有滚动条。上面的代码显示了两个滚动条,一个是整个body,另一个是page3.html我不想要 2 个滚动条,只想要一个,当我添加

<body style="overflow:hidden">, 

第 3 页的滚动条也被隐藏。我尝试使用 (overflow:scroll !important) 但没有用。有没有办法优雅地做到这一点?

最佳答案

你把 page3 的宽度设置得太高,100% 会把 iframe 的边缘,包括滚动条,推到 overflow hidden 的 body 的边缘之外

<body style="overflow:hidden">  
<iframe src = "http://www.amazon.com" style="position:fixed; width:100%; height:100px; left:0; top:0; overflow:hidden"></iframe>
<iframe src = "http://www.amazon.com" style="position:fixed; width:100px; height:100%; left:0; top:100px; overflow:hidden"></iframe>
<iframe src = "http://www.amazon.com" style="position:absolute; width:50%; height:100%; left:100px; top:100px; overflow:scroll;"></iframe>
</body>

http://jsfiddle.net/VBZKa/1/

你可能需要用javascript计算宽度

关于javascript - 如何在固定其他框架的同时仅在一个iframe中显示滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18522307/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com