监听滚动事件
1、首先获取到iframe的window对象
js 获取iframe的window对象
var frameWidow = document.getElementById('iframeId').contentWindow;
jq 获取iframe的window对象
var frameWidow = $("#iframeId")[0].contentWindow;
2、添加事件监听
js 监听
//监听
frameWidow.onscroll = function () {
//获取滚动条的位置
var scrollTop = frameWidow.document.documentElement.scrollTop || frameWidow.document.body.scrollTop;
// window.pageYOffset (支持IE9+)
// var scrollTop = frameWidow.pageYOffset;
// var scrollTop = frameWidow.document.scrollingElement.scrollTop;
}
jq 监听
//监听
$(frameWidow).scroll(function(e){
//获取滚动条的位置
var scrollTop=$(frameWidow).scrollTop();
});
3、滚动到指定位置
js 滚动
// 两端通用
frameWidow.document.scrollingElement.scrollTop = 100
// 适用PC端
frameWidow.document.documentElement.scrollTop = 200
// 适用移动端
frameWidow.document.body.scrollTop = 300
// scrollTo()方法
frameWidow.scrollTo(0, 400);
jq 滚动
$(frameWidow).scrollTop(200);
注意:如果需要打开页面就滚动到指定位置,此时可能滚动方法不起作用,可能是因为页面还没加载完毕,可以设置一个定时器。
//定时器
setTimeout(() => {
//frameWidow.scrollTo(100, 300);
$(frameWidow).scrollTop(200);
}, 1000)
PS:如果设置了监听但不起作用,可以查看:https://blog.csdn.net/qq_39998026/article/details/129283201