Dừng cuộn trên khung nội tuyến có thể phóng to

Question

Tôi đang làm việc trên trang web nhúng một trang khác từ một tên miền khác trong iframe. Nội dung của trang này phù hợp chính xác với iframe, vì vậy không có nội dung tràn và không có thanh cuộn. Tuy nhiên, nội dung có thể được phóng to bằng con lăn chuột.

Nhưng trong Safari và Chrome, phóng to với con lăn chuột cũng cuộn toàn bộ trang. Tôi không muốn cuộn này xảy ra --- chỉ thu phóng khung nội tuyến. Làm thế nào tôi có thể ngừng cuộn này khi con chuột trên khung nội tuyến?

Tôi đã cố gắng tạo lại sự cố trong ví dụ tối thiểu trên JSFiddle: https://jsfiddle.net/twodee/57a68k3h. Khi tôi phóng to khung nội tuyến màu xanh lục, văn bản sẽ thu phóng nhưng trang cũng cuộn.

frame = document.getElementById('myframe'); 
 
frame_child = document.createElement('div'); 
 

 
var font_size = 12; 
 
frame_child.addEventListener('wheel', function(e) { 
 
    font_size += e.wheelDelta; 
 
    frame_child.style.fontSize = font_size + 'px'; 
 
}); 
 

 
frame_child.style.width = '190px'; 
 
frame_child.style.height = '190px'; 
 
frame_child.innerHTML = 'this text should zoom'; 
 
frame.contentWindow.document.body.appendChild(frame_child);

#myframe { 
 
    background-color: #00FF00; 
 
}

<ul> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
</ul> 
 
<div> 
 
    <iframe id="myframe" height="200px" width="800px" src="about:blank"></iframe> 
 
</div> 
 
<ul> 
 
    <li>b</li> 
 
    <li>b</li> 
 
    <li>b</li> 
 
    <li>b</li> 
 
    <li>b</li> 
 
    <li>b</li> 
 
    <li>b</li> 
 
    <li>b</li> 
 
    <li>b</li> 
 
    <li>b</li> 
 
    <li>b</li> 
 
    <li>b</li> 
 
    <li>b</li> 
 
</ul>

EDIT: Ví dụ trên là một chút sai lệch trong đó các nguồn iframe là không thực sự tạo động bởi kịch bản của riêng tôi. Thay vào đó, nguồn được tạo ra bởi một trang web riêng biệt, mà dự kiến ​​đầu vào biểu mẫu từ người yêu cầu. Đây là một CodePen thể hiện tốt hơn vấn đề của tôi: http://codepen.io/twodee/pen/PGqgyw. (JSFiddle chỉ cho phép các nguồn https: //.)

Khi tôi xoay bánh xe qua khung nội tuyến, khối 3D thu phóng và cuộn trang.

EDIT: Hiệu ứng tôi theo sau là những gì tôi thấy khi Google Maps được nhúng vào một trang. Hoặc Sketchfab. Khi tôi nhúng chúng vào một khung nội tuyến, tôi không phải làm bất cứ điều gì đặc biệt trong trang đang thực hiện nhúng để làm cho việc phóng to xảy ra mà không cần cuộn. Dường như có nội dung nào đó về nội dung được nhúng mà vô hiệu hóa cuộn, nhưng tôi không biết điều gì.

Answer 1

Như những người khác đã nêu, ngăn chặnDefault() hoạt động tốt cho ví dụ đầu tiên của bạn, nơi đó là div.

Nhưng điều này dường như không thể xảy ra trên khung nội tuyến cho các trang web bên ngoài, bởi vì chỉ một số sự kiện nhất định được ghi lại trên khung nội tuyến. Trên codepen này, bạn có thể thấy rằng sự kiện mouseenter được chụp trên khung nội tuyến, nhưng nhấp chuột và bánh xe thì không. Chú ý đến các câu lệnh console.log (mục tiêu) và hoạt động nào không hoạt động.

Codepen

<iframe id="myframe" src="http://www.w3schools.com"> 
</iframe> 
<br> 
<div id="div1"> 
    test 
</div> 
<div id="div2"> 
</div> 

CSS

iframe { 
    width:600px; 
    height:200px; 
    border: 10px solid red; 
} 
div { 
width:600px; 
height:40px; 
border: 10px solid blue; 
} 
#div2 { 
width:600px; 
height:800px; 
border: 10px solid green; 
} 

JS

frame = document.getElementById('myframe'); 
div = document.getElementById('div1'); 

frame.addEventListener('mouseenter', function(e) { 
    console.log('entered'); 
    var target = e.target; 
    console.log(target); 
}); 
frame.addEventListener('click', function(e) { 
    console.log('clicked'); 
    var target = e.target; 
    console.log(target); 
}); 
frame.addEventListener('wheel', function(e) { 
    console.log('wheel'); 
    var target = e.target; 
    console.log(target); 
}); 

font_size = 12; 
div1.addEventListener('wheel', function(e) { 
    var target = e.target; 
    console.log(target); 
    font_size += -e.wheelDelta/100; 
    this.style.fontSize = font_size + 'px'; 

    if(target.id === 'div1') 
    e.preventDefault(); 
}); 

Cập nhật: Vì bạn nói rằng bạn có thể kiểm soát nội dung iframe, bạn có thể thêm sự kiện bánh xe xử lý cho khung Nội dung. Hãy thử điều này ...

HTML trên nội dung khung

<div id="framedDiv"> 
    abc<br> 
    def<br> 
    ghi<br> 
    jkl<br> 
    mno<br> 
    pqr<br> 
    stu<br> 
    vwx<br> 
    abc<br> 
    def<br> 
    ghi<br> 
    jkl<br> 
    mno<br> 
    pqr<br> 
    stu<br> 
    vwx<br> 
    abc<br> 
    def<br> 
    ghi<br> 
    jkl<br> 
    mno<br> 
    pqr<br> 
    stu<br> 
    vwx<br> 
</div> 

JS trên nội dung khung

framed = document.getElementById('framedDiv'); 
font_size = 12; 

framed.addEventListener('wheel', function(e) { 
    var target = e.target.id; 
    console.log(target); 
    font_size += -e.wheelDelta/100; 
    this.style.fontSize = font_size + 'px'; 
    e.preventDefault(); 
}); 

Answer 2

Thêm một người biết lắng nghe cho cửa sổ (mẹ của iframe) và cố gắng này:

window.addEventListener("wheel", function() { 

    if ($("#myframe").is(":hover")) { 

     // call iframe zoom function here 

     return false; 

    } 

}); 

Khi chuột được lơ lửng trên các iframe, trả về false trên cuộn cửa sổ nhưng thực hiện zoom.

Answer 3

Bạn có thể thêm người nghe sự kiện chuột trên Iframe của bạn để kiểm tra xem nếu chuột của bạn là ở trong đó, và nếu nó sau đó được dừng cuộn từ xảy ra trên cửa sổ:

frame = document.getElementById('myframe'); 
frame_child = document.createElement('div'); 
var font_size = 12; 
var inFrame=false; 
frame_child.addEventListener('wheel', function(e) { 
    font_size += e.wheelDelta; 
    frame_child.style.fontSize = font_size + 'px'; 
}); 
frame.addEventListener("mouseover",function(e){ 
inFrame=true; 
}); 
frame.addEventListener("mouseout",function(e){ 
inFrame=false; 
}); 
window.addEventListener('wheel',function(e){ 
if(inFrame) 
    e.preventDefault(); 
}) 
frame_child.style.width = '190px'; 
frame_child.style.height = '190px'; 
frame_child.innerHTML = 'this text should zoom'; 
frame.contentWindow.document.body.appendChild(frame_child); 

Chỉ cần thêm ngăn chặn mặc định trên div của bạn bánh xe nghe:

frame_child.addEventListener('wheel', function(e) { 
e.preventDefault(); 
    font_size += e.wheelDelta; 
    frame_child.style.fontSize = font_size + 'px'; 
}); 

Answer 4

sử dụng mã này trên chuột :hover

$("#myframe").hover(
    function() { 
    function disableScroll() { 
    if (window.addEventListener) // older FF 
     window.addEventListener('DOMMouseScroll', preventDefault, false); 
    window.onwheel = preventDefault; // modern standard 
    window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE 
    window.ontouchmove = preventDefault; // mobile 
    document.onkeydown = preventDefaultForScrollKeys; 
    }, function() { 
    if (window.removeEventListener) 
     window.removeEventListener('DOMMouseScroll', preventDefault, false); 
    window.onmousewheel = document.onmousewheel = null; 
    window.onwheel = null; 
    window.ontouchmove = null; 
    document.onkeydown = null; 
    } 
); 

$("#myframe.fade").hover(function() { 
    $(this).fadeOut(100); 
    $(this).fadeIn(500);