怎樣在iframe中實(shí)現(xiàn)平滑滾動(dòng)

小樊
123
2024-07-10 20:48:36
欄目: 編程語言

要在iframe中實(shí)現(xiàn)平滑滾動(dòng)，可以使用JavaScript來實(shí)現(xiàn)。首先，在iframe的內(nèi)容頁面中添加以下JavaScript代碼來監(jiān)聽頁面中的滾動(dòng)事件：

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

然后，在包含iframe的父頁面中添加以下JavaScript代碼來捕獲iframe發(fā)送的滾動(dòng)消息，并在父頁面中實(shí)現(xiàn)平滑滾動(dòng)效果：

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

請(qǐng)確保替換代碼中的"iframe"為實(shí)際的iframe元素ID。這樣就可以實(shí)現(xiàn)在iframe中的平滑滾動(dòng)效果。

0 踩