Остановить прокрутку по масштабируемому iframe

Ответ 1

Как утверждали другие, preventDefault() отлично работает для вашего первого примера, где это div.

Но это не представляется возможным в iframe для внешних сайтов, потому что на iframe фиксируются только определенные события. На этом кодеде можно увидеть, что событие mouseenter записывается в iframe, но клик и колесо отсутствуют. Обратите особое внимание на инструкции console.log(целевые), и которые работают, а какие нет.

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

Обновлено: Поскольку вы говорите, что у вас есть контроль над содержимым iframe, вы можете добавить обработчик события колеса в обрамленный контент. Попробуйте это...

HTML для содержимого в рамке

<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 на представленном контенте

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

Ответ 2

Вы можете добавить прослушиватели событий мыши в свой iframe, чтобы проверить, находится ли в нем ваша мышь, и если это произойдет, остановите прокрутку в окне:

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

Забастовкa >

Просто добавьте опцию по умолчанию для вашего слушателя Div-диска:

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

Ответ 3

используйте этот код для мыши :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 );

Ответ 4

Добавьте слушателя для окна (родитель iframe) и попробуйте следующее:

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

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

        // call iframe zoom function here

        return false;

    }

});

Когда курсор мыши курсирует над iframe, верните false в прокрутку окна, но выполните масштабирование.