在iframe中滚动时，修复屏幕顶部的div
可以通过以下步骤实现：
- 首先，确保你的HTML文档中已经包含了一个固定在屏幕顶部的div元素，可以使用CSS的position属性将其固定在顶部，例如：
#topDiv {
position: fixed;
top: 0;
width: 100%;
background-color: #fff;
z-index: 9999;
}- 在iframe中滚动时，可以通过JavaScript来监听滚动事件，并根据滚动的位置来动态调整顶部div的位置。可以使用以下代码：
var iframe = document.getElementById('myIframe');
iframe.contentWindow.onscroll = function() {
var scrollTop = iframe.contentWindow.pageYOffset || iframe.contentDocument.documentElement.scrollTop;
var topDiv = document.getElementById('topDiv');
if (scrollTop > 0) {
topDiv.style.top = scrollTop + 'px';
} else {
topDiv.style.top = '0';
}
};其中，'myIframe'是你的iframe元素的id，'topDiv'是你要修复的屏幕顶部div的id。
- 最后，你可以将上述代码放置在页面加载完成后执行的JavaScript函数中，或者在页面中引入外部的JavaScript文件来实现。
这样，当在iframe中滚动时，屏幕顶部的div将会保持在屏幕顶部不动，提供更好的用户体验。
推荐的腾讯云相关产品：腾讯云CDN（内容分发网络），详情请参考：腾讯云CDN产品介绍。腾讯云CDN可以加速内容分发，提高网站的访问速度和稳定性，适用于各种网站和应用场景。
相关·内容
这个问题以前已经被重复过了，我已经尝试了我在互联网上找到的所有东西。
我在iframe里面有一个div 'A‘，而iframe在包装器div里面。当我试图在移动视图中修复屏幕顶部的div 'A‘时，它可以在没有iframe的情况下工作，但在ifra
浏览 17提问于2019-11-27得票数 0
1回答
有一个iframe在我的页面，我需要显示一个小div弹出窗口使用javascript代码在iframe。iframe的域和父域不同。如何在整个屏幕中居中显示此div弹出窗口。
浏览 0提问于2015-12-02得票数 0
1回答
我在我的主页上有一个iframe。iframe生成图像并将其发送到父页面。我的问题是，在iframe生成图像后，我的父页面会滚动回到顶部。如何在iframe中禁用滚动顶部事件？Fix :将iframe设置为display none修复此问题，但display none中的<e
浏览 1提问于2015-11-11得票数 0
1回答
: hidden到它的CSSoverflow: hidden到html，页面的主体加载到html中，页面的正文也加载在iframe中(禁用touchstart、touchmove和touchend的动量有了这些，当我触摸到iframe顶部的屏幕部分并移动我的手指时，而不是滚动父页面(因为据推测我在iframe中
浏览 3提问于2019-11-23得票数 1
2回答
跳跳中的锚固环节
、、
我在页面中间有一个iframe，。我正试图在iframe中显示另一页，但要从下面几段开始，而不是在顶部。
因此，我在我的iframe src中放置了一个锚，对应于我另一个页面中的锚名标记。iframe滚动自身正常，但是页面的主体也会滚动，这样iframe的顶部就在屏幕
浏览 3提问于2013-09-19得票数 1
这是加载到父页面的iFrame中的脚本。
问题：，我希望它在每次单击iframe中指定的内容时滚动到iFrame的顶部，同时具有iFrame更改页面的内容。(例如，我单击iFrame中的提交按钮在iFrame中加载新内容。同时，父页面滚动到iFrame的<e
浏览 1提问于2013-01-18得票数 0
嗨，我正在寻找一个我正在开发的移动网站的帮助。我正在尝试获得一个页面，在屏幕顶部有一个工具栏，有上一个和下一个按钮，大部分的视窗显示一个包含第三方网站的iframe。
我有几个问题来解决这个问题。当移动浏览器禁用touchstart和touchend事件之间的DOM渲染时，我无法在滚动时移动div。我现在遇到的主要问题是
浏览 0提问于2011-08-15得票数 0
4回答
将侧菜单贴在顶部
、、、
我一直在考虑在屏幕上方滚动时将一个" div“粘贴到屏幕顶部，或者在页面到达屏幕顶部时使用div滚动。当我尝试这个问题时，我遇到的问题是使用jquery或简单的css更改为position: fixed;，从元素中移除浮点。我的布局有点像这样： &
浏览 2提问于2014-05-12得票数 0
我在页面上有一个元素，当单击它时，会向包含iframe的页面添加一个div。当使用Safari在移动设备上向上滚动页面时
浏览 41提问于2020-02-22得票数 1
我使用以下CSS在div中显示了一些文本： position:fixed; width: 270px;这是为了当我滚动时，它总是显示在屏幕的顶部但是，当有很多文本时，div会被截断，因为position:fixed会阻止它与所在的页面一起向下滚动。
我打算换成iframe
浏览 0提问于2013-05-29得票数 1
回答已采纳
5回答
因此，当iframe内部有一个固定的div时，它不会修复。是否有CSS属性强制iframe在移动中滚动并尊重固定内容？Note：固定内容在iframe中，而不是在容器中，因此div滚动不会修复这个问题。<iframe src="page-with-fixed-
浏览 1提问于2019-02-28得票数 3
回答已采纳
在Fancybox iFrame中(使用javascript)在iOS设备中移动和显示div时，iframe滚动到窗口顶部，用户必须向下滚动以查看div。在非iOS设备中，div被移动到视图中，而不需要iFrame滚动(这正是我想要的)。复制步骤：
使用Safari导航到iPad上
浏览 2提问于2018-04-02得票数 0
回答已采纳
我使用导航栏div来使用position: sticky; CSS技巧停留在屏幕顶部。"> </div>
</body> 这很好用，除非我在主要内容中嵌入了YouTube iframe： 这是CSS： #yt0/QjHNHonuCQU" frameborder="0&
浏览 23提问于2019-12-18得票数 0
回答已采纳
当在iframe中嵌入一个引导程序时，模式对话框总是在iframe的顶部打开，而不是屏幕的顶部。例如，转到并在页面上打开一个示例模式。然后使用下面的示例代码将相同的引导页放在一个iframe中，找到一个模式并打开它： <head> <body>
<t
浏览 5提问于2014-07-17得票数 16
当我呈现元素并将它们附加到父div时，我的屏幕一直跳到最底层的元素，因为它正在被加载，而不是加载它们，并让视图停留在当前视图中。所以在开始的时候，它应该在屏幕的顶部，而不是跳到底部，当我向下滚动的时候，它会呈现更多的元素，在其他的负载下，它也应该停留在那个位置。
这是我的js文件中本质上的代码
浏览 1提问于2016-08-25得票数 4
回答已采纳
2回答
我使用这段代码将myDiv中心设置为活动屏幕。，并将myDiv正确地居中到活动屏幕(忽略页面的长度，不管我有多少向下滚动或更高的滚动)，代码就能很好地工作。但是，当页面在iframe中加载时，代码就无法按照预期工作，并根据内容的完整长度(而不是活动屏幕)对DIV (垂直)进行中心设置。因此，如果我在屏幕的顶部，让页面长3000
浏览 8提问于2014-01-08得票数 0
回答已采纳
因此，我使用非常棒的库来调整iFrame的大小并将其保持在焦点位置。
麻烦的是(我的生活)我不知道如何让iFrame在调整大小时，在顶部添加一些额外的填充。实际情况是，iFrameResizes在某一点上滚动，窗口向上滚动，但iFrame位于固定菜单的下方(见下文)。我认为这是因为iFrameResize使用了
浏览 4提问于2015-12-24得票数 0
1回答
下面是在用户滚动到屏幕顶部时将div修复到屏幕顶部的代码。
但是，在我的浏览器上，如果用户向左或向右滚动，则栏保持固定在顶部，但滚动。我想让酒吧保持原样，内容已经结束了。
浏览 3提问于2014-01-10得票数 0
回答已采纳
我有一个包含外部内容的iframe，它从父div滚动而来( iframe高度较大，而iframe容器div的高度较小)。因此，当我滚动到底部时，当我将另一个页面加载到iframe中时，滚动条仍停留在那里。
浏览 0提问于2010-12-04得票数 1
这里有点新，所以在过去的2小时里，我一直在尝试定位一个iframe，但却没能把它做好(或者接近它.)我的目标是把亚马逊的iframe定位到写"Hello，name“的地方。首先，我不能设置iframe，因为它们的原产地策略相同，但我想有些页面没有受到保护，比如：。
在我的帐户信息上定位iframe似乎是不可能的(尝试了页边距-左、右、<
浏览 3提问于2015-01-12得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
