首页在页面嵌入一个iframe控件，在iframe里可以浏览其他网页。如何设置鼠标滚动仅对iframe页面有效.对父页面无效

在页面嵌入一个iframe控件，在iframe里可以浏览其他网页。如何设置鼠标滚动仅对iframe页面有效.对父页面无效

时间: 2023-08-11 19:27:44 浏览: 127

你可以使用JavaScript来实现这个需求。具体步骤如下： 1. 获取到iframe元素，并为其添加滚动监听事件； 2. 在滚动监听事件中，阻止事件冒泡，并且只对iframe页面进行滚动。下面是示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>iframe滚动示例</title> </head> <body> <h1>父页面</h1> <iframe src="https://www.baidu.com" id="myIframe" width="800" height="600"></iframe> <script> var iframe = document.getElementById('myIframe'); iframe.contentWindow.document.addEventListener('scroll', function(event) { event.stopPropagation(); // 阻止事件冒泡 iframe.contentWindow.scrollBy(0, event.deltaY); // 只对iframe页面进行滚动 }); </script> </body> </html> ``` 在上面的示例代码中，我们首先获取到了iframe元素，并为其添加了滚动监听事件。在滚动监听事件中，我们通过`event.stopPropagation()`方法阻止了事件冒泡，然后调用了`iframe.contentWindow.scrollBy(0, event.deltaY)`方法来实现对iframe页面的滚动。需要注意的是，`event.deltaY`表示鼠标滚轮滚动的距离，这里我们只对垂直方向进行滚动，因此第一个参数设置为0。这样就可以实现鼠标滚动仅对iframe页面有效，对父页面无效的效果了。

阅读全文