两个frame同步滚动

最新推荐文章于 2023-05-29 18:16:41 发布
原创 最新推荐文章于 2023-05-29 18:16:41 发布 · 2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#function #iframe #scroll #html #border #input

本文提供了一个简单的帧同步滚动Demo，通过JavaScript实现两个iframe内的滚动条同步滚动效果，并提供了开启和关闭同步的功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

应网友要求，写了一个frame同步滚动的DEMO，很简单，收录在这里：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
    body {
        font-size:9pt;
        color:#333333;
    }
    iframe {
        position:absolute;
        width:200px;
        height:400px;
        margin:20px;
        border:1px solid #FF6600;
    }
    #ifr1 {
        left:20px;
        top:20px;
    }
    #ifr2 {
        left:320px;
        top:20px;
    }
</style>
<script type="text/javascript">
    function FrameHelper(ifr1,ifr2){
        this.ifr1 = ifr1;
        this.ifr2 = ifr2;
        this.syncable = true;
        this.bindEvent();
    }
    FrameHelper.prototype = {
        sync:function(activeFrame){
            if(!this.syncable)return;
            var passiveFrame = (activeFrame == this.ifr1) ? this.ifr2 : this.ifr1;
            if(activeFrame.document.documentElement){
                passiveFrame.document.documentElement.scrollTop = activeFrame.document.documentElement.scrollTop;
                passiveFrame.document.documentElement.scrollLeft = activeFrame.document.documentElement.scrollLeft;
            }else{
                passiveFrame.document.body.scrollTop = activeFrame.document.body.scrollTop;
                passiveFrame.document.body.scrollLeft = activeFrame.document.body.scrollLeft;
            }
        },
        bindEvent:function(){
            var _this = this;
            if(document.all){
                this.ifr1.attachEvent("onscroll",function(){_this.sync(_this.ifr1);});
                this.ifr2.attachEvent("onscroll",function(){_this.sync(_this.ifr2);});
            }else{
                this.ifr1.addEventListener("scroll",function(){_this.sync(_this.ifr1);},false);
                this.ifr2.addEventListener("scroll",function(){_this.sync(_this.ifr2);},false);
            }
        },
        syncModeOn:function(){
            this.syncable = true;
        },
        syncModeOff:function(){
            this.syncable = false;
        }
    }
    window.onload = function(){
        var fh = new FrameHelper(document.getElementById("ifr1").contentWindow,document.getElementById("ifr2").contentWindow);
        document.getElementById("toggle").onchange = function(){
            (!!this.checked)?fh.syncModeOn():fh.syncModeOff();
        }
    }
</script>
</head>

<body>
<iframe id="ifr1" src="s.html"></iframe>
<iframe id="ifr2" src="s.html"></iframe>
<input type="checkbox" id="toggle" checked="checked"/>是否同步滚动
</body>
</html>

 
同步滚动(两个iframe内嵌同一个html页面进行)
沈英逊的博客
01-08 4544
有时候我们在一个页面中会出现左右两个ifame，这两个iframe内嵌的html页面为相同的，只是渲染的数据不同，然后需要其同步滚动，便于进行比较，如查重。 一、功能实现： 1、在父页面js中编写触发iframe滚动高度的函数，需要分两个，分调用两个不同iframe的滚动条： /*嵌套的页面滚动*/ function scrollTopA(topNum) { /*iframe1为ifra...
qt低版本中列表同步滚动
最新发布
twtongwei的博客
09-23 286
qt5.15版本中scrollView没有同步滚动信号。采用Flickable滑动的信号，在Flickable中使用ScrollBar自定义滚动条，滚动条可以附加到任何 Flickable。使用Flickable中的onContentYChanged和onContentXChanged信号，并且设置滚动方向flickableDirection: Flickable.HorizontalAndVerticalFlick，从而同步其他的Flickable。
两个iframe同时滚动实现界面内容对比功能
qq_30515213的博客
05-29 1192
PS：版本对比思路是（不做对比跳过），版本1、版本2两个数据存放 采用 key - value 格式 这样遍历的时候 就可以 通过 for(key in versionAyy) 来遍历，通过 key去获取另外一个数组的 内容，然后两个进行比较(当遇到多选框、复选框 只展示差异选项时，通过字符截取 获取选择项 然后逐一对比，获取差异项存放到另一个差异项数组中)，如果差异就 存放到一个差异集合，子界面再调用即可，这里就不放上来了，如有需要或者探讨可以联系我。优点，可以实现N个界面同时滚动和对比。
iframe同步滚动问题
weixin_40863414的博客
08-02 832
iframe同步滚动效果中，监听scroll触发另一个的scrollTop方法中存在一个循环，会导致滚动很卡，需要破除这种循环。 文章地址： iframe同步滚动问题
有关框架左右同时滚动效果。
yuan8080的专栏
05-19 416
                        window.onscroll=function(){    parent.menu.document.body.scrollLeft = document.body.scrollLeft + px;    }
js postMessage实现iframe同步滚动对比
Stavin Li的博客
04-29 722
注意：不能用绝对路径打开html，否则报错 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('null') does not match the recipient window's origin ('null'). 1.index.html <!DOCTYPE html> &lt...
tkinter实现一个滚动条同时控制两个部件
u014297638的博客
04-01 1952
tkinter实现一个滚动条同时控制两个部件 import tkinter as tk def Wheel(event):#鼠标滚轮动作 print(str(-1*(event.delta/120)))#windows系统需要除以120 text2.yview_scroll(int(-1*(event.delta/120)), "units") text1.yview_...
python 网络音乐播放器（二）：tkinter 实现歌词同步滚动
张大帅哥的博客
08-11 3690
全站首个可以控制进度的 tkinter 网络音乐播放器！ 用 tkinter 的 Listbox 实现歌词同步滚动。
pysimplegui如何让不同的元素同步滚动且只显示一个滚动条
05-28
以下是一个示例程序，它将两个`Multiline`元素和一个`Table`元素包含在一个`TKScrolledFrame`中，并实现了它们之间的滚动同步： ```python import PySimpleGUI as sg # Define the layout layout = [ [ sg....
frame页面双滚动条问题
fengbin2005
07-22 394
调整双滚动条心得 1.将页面的高度调高, 看到里面的滚动条还只有一点点. 2.断定是里面的div的高度出问题. 3.设置view的高度 设置为800 ,里面的高度为700 就ok了.   因为view采用默认高度才230多.实际上有700多.   先将居中的样式弄掉,在原始的样式下.调整到单个页面下没有滚动条就ok了. 使用裁剪法.将没用的区块都去掉. 留下核心的区块. 然后再调...
JS去除iframe滚动条的方法
10-24
主要介绍了JS去除iframe滚动条的方法,涉及javascript操作iframe中属性的技巧,非常具有实用价值,需要的朋友可以参考下
如何让iframe框架和主页面共用一个滚动条(也称为：iframe高度自适应问题)
weixin_30873847的博客
08-09 1268
最近在前端页面遇到了一个问题，我在一个页面中利用iframe框架引入了一个页面进来，但是这个页面的高度是不叫高的，高出电脑屏幕很多， 所以就引发了iframe框架一个滚动条，然后主页面一个滚动条，这样页面就出现了两个滚动条。在网上查了好久，一直没有好的方法，直到我在 网上看到了iframe高度自适应，才解决了这个问题。 自适应的意思是，iframe框架的高度自动适应引入的HTML文...
iframe双滚动条的问题
fengbin2005
12-28 319
用dorado做的首页,不知道咋回事,本地没问题. 线上就出现双滚动条的问题.   发现是frame 里面的页面.    &lt;Property name="contentOverflowY"&gt;auto&lt;/Property&gt; 修改为    &lt;Property name="contentOverflowY"&gt;hidden&lt;/Property&gt;  ...
多个iframe自适应高度共用一个滚动条
zyy_jay的专栏
09-10 310
我在一个页面中有两个iframe，这两个是并列的，一个在左边显示person的数据，一个在右边显示cell的数据，如果被引用的页面数据太大，就会被截掉，但是设置scrolling=“auto”的话，双会出现两个滚动条。在网上查了一下代码，大概有两种方式可以实现 方法一.被引用的页面是静态的高度 js代码 [code="java"] //获取被包含的页面的静态高度，来设置ifram...
iframe出现双层滚动条解决方案
lipeng的博客
06-24 3140
在开发中出现一个iframe双滚动条问题，查了很多资料，网上的解决方案是定义iframe的onload事件，加载时重新加载高度，但是由于项目中页面渲染完成后，点击按钮动态生成数据，这时候上面的方案就不可行了。 下面是通过jquery.layout.js来解决双滚动条问题。 html代码 &lt;body &gt; &lt;div id="mainFrameDiv" class="ta...
vue中两个iframe滚动条同步滚动问题总结
weixin_45658147的博客
12-13 1913
vue中两个iframe同步滚动的需求问题总结
pysimplegui不同元素如何同步滚动
05-28
在PySimpleGUI中，不同元素之间的滚动同步可以通过使用`TKScrollableFrame`实现。`TKScrollableFrame`是一个自定义的PySimpleGUI元素，它可以将多个PySimpleGUI元素包含在一个可滚动的框架中。 以下是一个示例程序，它将两个`Multiline`元素包含在一个`TKScrollableFrame`中，并实现了它们之间的滚动同步： ```python import PySimpleGUI as sg # Define the layout layout = [ [ sg.TKScrollableFrame( layout=[ [sg.Multiline(size=(40, 10), key="-MULTI1-")], [sg.Multiline(size=(40, 10), key="-MULTI2-")] ], size=(600, 400), scrollable=True, vertical_scroll_only=True ) ], [sg.Button("Exit")] ] # Create the window window = sg.Window("Scrollable Frame", layout) # Create a reference to the scrollable frame scrollable_frame = window["-TKScrollableFrame-"] # Create a reference to each multiline element multi1 = window["-MULTI1-"] multi2 = window["-MULTI2-"] # Loop to process window events while True: event, values = window.read() # Exit if the Exit button is clicked or the window is closed if event == sg.WINDOW_CLOSED or event == "Exit": break # Synchronize the scroll positions of the multiline elements scroll_position = scrollable_frame.vertical_scroll_position multi1.Widget.yview_moveto(scroll_position) multi2.Widget.yview_moveto(scroll_position) # Close the window window.close() ``` 在上面的示例程序中，`TKScrollableFrame`元素包含了两个`Multiline`元素。当用户在其中一个`Multiline`元素中滚动时，代码会将另一个`Multiline`的滚动位置设置为相同的值，从而实现它们之间的滚动同步。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值