目录
引言
基本原理
1.隐藏iframe的滚动条
2.使用sticky粘性定位固定子页面
3.通过postMessage通信实现父子页面滚动联动
完整代码
引言
在开发过程中，有时候需要用到iframe复用不同域名下的页面内容。为了提供连贯的用户体验，经常需要在主页面（父页面）和iframe子页面之间共享滚动位置。当用户在父页面中滚动时，我们希望子页面的滚动条也能相应地移动到相同的位置。本文将介绍其中较为常见的一种方法，即使用
postMessage
来实现父子页面间的通信，从而实现滚动同步。
基本原理
1.隐藏iframe的滚动条
我们可以通过iframe属性
frameborder="0"
和
scrolling="no"
来隐藏iframe的滚动条，从而避免嵌入iframe的页面双滚动条的出现。
2.使用sticky粘性定位固定子页面
iframe设置了以上属性之后，子页面无法滚动，而随着父页面滚动，子页面也会跟着滚上去，不是我们想要的效果。所以需要用css的sticky粘性定位固定子页面top上升到顶部就固定。
3.通过postMessage通信实现父子页面滚动联动
我们可以通过监听父页面的滚动事件，将滚动信息传给子页面，子页面通过监听父页面的postMessage事件，获取滚动信息，手动触发滚动事件，从而实现滚动联动。
父页面代码：
window.onscroll = function(){
document.querySelector('iframe').contentWindow.postMessage({'scrollTop':window.scrollY},'*');
}
子页面代码：
window.addEventListener('message', function (event) {
window.scrollTo(0,event.data.scrollTop);
});
完整代码
父页面：parent.html
parent
子页面：son.html
son
1
2
3
4
5
6
7
8
9
10
11
12
到此这篇关于iframe父子页面实现共用滚动条的常见方法的文章就介绍到这了,更多相关iframe父子页面滚动条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
layer弹出子iframe层父子页面传值的实现方法
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
利用JS对iframe父子（内外）页面进行操作的方法教程
JavaScript中关于iframe滚动条的去除和保留
iframe 上下滚动条如何默认在下方实现原理