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;
}

  jq 监听

//监听
$(frameWidow).scroll(function(e){
    //获取滚动条的位置
    var scrollTop=$(frameWidow).scrollTop();
});

3、滚动到指定位置

  js 滚动

frameWidow.scrollTo(100, 300);

  jq 滚动

$(frameWidow).scrollTop(200);

注意：如果需要打开页面就滚动到指定位置，此时可能滚动方法不起作用，可能是因为页面还没加载完毕，可以设置一个定时器。

//定时器
setTimeout(() => {
    //frameWidow.scrollTo(100, 300);
    $(frameWidow).scrollTop(200);
}, 1000)