iframe 监听滚动事件并滚动到指定位置

监听滚动事件

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