我已经附加了网站,因为我无法在jsfiddle中重新创建它。当鼠标悬停在iframe中的openzoom组件上并使用鼠标滚动或滚出时,页面也会移动。当我在iframe中时,如何阻止页面滚动?
打开main.html
答案 0 :(得分:0)
可以使用Brandon Aaron的Mousewheel插件。
这是代码..
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
<p>...</p>
<iframe src="viewer.htm" id="viewer" width="565px" height="200px" marginwidth="0px" marginheight="0" frameborder="0"></iframe>
<p>...</p>
<script src="https://github.com/brandonaaron/jquery-mousewheel/raw/master/jquery.mousewheel.js"></script>
<script>
$(function() {
var viewer = $('#viewer'),
height = viewer.height(),
scrollHeight = viewer.get(0).scrollHeight;
viewer.bind('mousewheel', function(e, d) {
if((this.scrollTop === (scrollHeight - height) && d < 0) || (this.scrollTop === 0 && d > 0)) {
e.preventDefault();
}
});
});
</script>
</body>
</html>
修改强>
链接到我的副本:http://testing.dpwebdev.co.uk/stackoverflow/main.html