怎样在iframe中实现平滑滚动

avatar
作者
猴君
阅读量:23

要在iframe中实现平滑滚动,可以使用JavaScript来实现。首先,在iframe的内容页面中添加以下JavaScript代码来监听页面中的滚动事件:

window.addEventListener('scroll', function() {   window.parent.postMessage('scrolling', '*'); }); 

然后,在包含iframe的父页面中添加以下JavaScript代码来捕获iframe发送的滚动消息,并在父页面中实现平滑滚动效果:

window.addEventListener('message', function(event) {   if (event.data === 'scrolling') {     var currentPosition = window.pageYOffset;     var targetPosition = document.getElementById('iframe').contentWindow.pageYOffset;     var distance = targetPosition - currentPosition;      var scrollInterval = setInterval(function() {       var step = distance / 10;       window.scrollTo(0, currentPosition + step);        if (Math.abs(distance) < Math.abs(step)) {         clearInterval(scrollInterval);         window.scrollTo(0, targetPosition);       }     }, 20);   } }); 

请确保替换代码中的"iframe"为实际的iframe元素ID。这样就可以实现在iframe中的平滑滚动效果。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!