サファリでマウスホイールイベントを検出できません

Question

マウスホイールイベントを検出してスクロールの要素のサイズを変更しようとしています。私は#mainDivを持っていて、いくつかのテーブルが内部に.fooあります。私はスクロールで.foo要素のスケールを変更したいが、#mainDivのサイズは同じままにしておきたい。これは私の機能です：

 var content = document.getElementById('mainDiv').getElementsByClassName('foo'); 
     var zX = 1; 

     $('#mainDiv').bind('mousewheel DOMMouseScroll', function(e){ 
      e.preventDefault(); 
      var dir; 
      if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0){ 
       dir = 0.05; 
      } 
      else{ 
       dir = -0.05; 
      } 
      zX += dir; 
      for (var i = 0; i<content.length; i++) { 
       content[i].style.transform = 'scale(' + zX + ')'; 
      } 
      return; 
     }); 

この機能はChrome、Firefox、IEでは正常ですが、Safariでは正常に動作します。どうしたの？

EDIT：.foo要素には表示プロパティがありません。それは問題になることができますか？私はちょうど私のアプリの機能のためにそれを設定したくありません。

EDIT 2：コードで再生するjsfiddleを作成しました。それはかなり大きいですが、私たちはjavascriptブロックで最初に機能するだけです。

https://jsfiddle.net/vaxobasilidze/cg3hkde7/9/

は「新しいリンクを追加」、右側を押しにいくつかの項目をドラッグします。次にスクロールします。テーブルのサイズは変更されますが、Safariでは変更されません。また、jsPlumbに精通しているなら、エンドポイントが場所やサイズを変更しない理由を助けることもできます。

Answer 1

このコードは以下のあなたに

document.getElementById("myDIV").addEventListener("wheel", myfns); 
 

 
function myfns(){ 
 

 
    console.log("wheel"); 
 

 
}

<div id="myDIV">scroll on me!</div>

を助けるかもしれない試しはjqueryのコード

var count = 0; 
 
$("#target").scroll(function() { 
 
    console.log("wheel " + count++); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<div id="target" style="overflow: scroll; width: 200px; height: 100px;"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
    sed do eiusmod tempor incididunt ut labore et dolore magna 
 
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
 
    ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    Duis aute irure dolor in reprehenderit in voluptate velit 
 
    esse cillum dolore eu fugiat nulla pariatur. Excepteur 
 
    sint occaecat cupidatat non proident, sunt in culpa qui 
 
    officia deserunt mollit anim id est laborum. 
 
</div>

リファレンスです

https://api.jquery.com/scroll/

私は今、私はそれを試し用マウスのスクロール仕事は、それが

var setZoom = function(z, el, instance) { 
 
    instance = instance || jsPlumb; 
 
    var p = ["-webkit-", "-moz-", "-ms-", "-o-", ""], 
 
    s = "scale(" + z + ")"; 
 
    for (var i = 0; i < p.length; i++) { 
 
    //el.css(p[i] + "transform", s);   //FIRST WAY TO TRANSFORM 
 
    el.style.transform = 'scale(' + zX + ')'; //SECOND WAY TO TRANSFORM 
 
    } 
 
    instance.setZoom(z); 
 
}; 
 

 
var content = document.getElementById('mainDiv').getElementsByClassName('foo'); 
 
var zX = 1; 
 
$('#mainDiv').bind('mousewheel DOMMouseScroll', function(e) { 
 
    e.preventDefault(); 
 
    var dir; 
 
    if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) { 
 
    dir = 0.05; 
 
    } else { 
 
    dir = -0.05; 
 
    } 
 
    if ((zX + dir) >= 0.05) { 
 
    zX += dir; 
 
    } 
 
    for (var i = 0; i < content.length; i++) { 
 
    content[i].style.transform = 'scale(' + zX + ')'; 
 
    setZoom(zX, content[i]); 
 
    } 
 
    return; 
 
}); 
 

 

 

 

 

 

 
var count = 0; 
 
$("#leftDiv").scroll(function() { 
 
    console.log("wheel " + count++); 
 
}); 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
$('#deviceName li').draggable({ 
 
    helper: 'clone', 
 
    revert: 'invalid' 
 
}); 
 
$('#interface li').draggable({ 
 
    helper: 'clone', 
 
    revert: 'invalid' 
 
}); 
 
$('#display li').draggable({ 
 
    helper: 'clone', 
 
    revert: 'invalid' 
 
}); 
 
$('#output li').draggable({ 
 
    helper: 'clone', 
 
    revert: 'invalid' 
 
}); 
 
$('#streams li').draggable({ 
 
    helper: 'clone', 
 
    revert: 'invalid' 
 
}); 
 

 
function foo() { 
 
    $('.foo').each(function() { 
 
    $(this).draggable({ 
 
     containment: $(this).parent(), 
 
     stack: '.foo' 
 
    }); 
 
    }); 
 
} 
 
var fooCount = $('.foo').length; 
 
$('#mainDiv').droppable({ 
 
    drop: function(event, ui) { 
 
    if (!ui.draggable.hasClass('foo')) { 
 
     var Class = ui.draggable.attr("class"); 
 
     var title = ui.draggable.text().trim(); 
 
     var item = $('<table class="foo elementTable ' + Class + '" name="' + title + '" id="' + (fooCount + 1) + '"><tr class="tableHeader"><th class="thClass"><button class="settings">set</button>' + title + '<span class="close">x</span></th></tr><tr><td class="add"><span class="addList">Add new link</span></td></tr></table>'); 
 
     $(this).append(item); 
 
     fooCount += 1; 
 
     foo(); 
 
    } 
 
    } 
 
}); 
 

 
var ListCount = $('.tableConn').length; 
 
$("body").on('click', '.addList', function() { 
 
    var newtr = '<tr class="tableBody" id="' + ListCount + '_' + ListCount + '"><td class="tableConn">Link ' + (ListCount + 1) + '</td></tr>'; 
 
    ListCount += 1; 
 
    $(newtr).insertBefore($(this).parent().parent()); 
 
    addPoints(); 
 

 
}); 
 

 
function addPoints() { 
 
    jsPlumb.setContainer("mainDiv"); 
 
    jsPlumb.draggable($('.foo')); 
 
    $('.tableBody').each(function() { 
 
    if (!$(this).hasClass('jsplumb-endpoint-anchor')) { 
 
     var objId = $(this).attr("id"); 
 
     jsPlumb.addEndpoint($(this), { 
 
     anchor: "Right", 
 
     isSource: true, 
 
     isTarget: false, 
 
     connector: "Bezier", 
 
     endpoint: ["Image", { 
 
      url: "https://d30y9cdsu7xlg0.cloudfront.net/png/868142-200.png", 
 
      width: 17, 
 
      height: 17 
 
     }], 
 
     connectorStyle: { 
 
      strokeStyle: "grey", 
 
      lineWidth: 3 
 
     }, 
 
     connectorHoverStyle: { 
 
      lineWidth: 3 
 
     }, 
 
     maxConnections: -1, 
 
     uuid: $(this).attr("id") + 'r' 
 
     }); 
 
     jsPlumb.addEndpoint($(this), { 
 
     anchor: "Left", 
 
     isSource: false, 
 
     isTarget: true, 
 
     connector: "Bezier", 
 
     endpoint: ["Image", { 
 
      url: "https://d30y9cdsu7xlg0.cloudfront.net/png/868142-200.png", 
 
      width: 17, 
 
      height: 17 
 
     }], 
 
     connectorStyle: { 
 
      strokeStyle: "grey", 
 
      lineWidth: 3 
 
     }, 
 
     connectorHoverStyle: { 
 
      lineWidth: 3 
 
     }, 
 
     uuid: $(this).attr("id") + 'l' 
 
     }); 
 
    } 
 
    }); 
 
} 
 

 
jsPlumb.bind("connectionDetached", function(connection) { 
 
    connection.targetEndpoint.setImage("https://d30y9cdsu7xlg0.cloudfront.net/png/868142-200.png"); 
 
    connection.sourceEndpoint.setImage("https://d30y9cdsu7xlg0.cloudfront.net/png/868142-200.png"); 
 
});

html { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #2c2c2c; 
 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJjMmMyYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iIzNkM2QzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzEzMTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
 
    background: -moz-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); 
 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #2c2c2c), color-stop(37%, #3d3d3d), color-stop(66%, #353535), color-stop(66%, #353535), color-stop(100%, #131313)); 
 
    background: -webkit-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); 
 
    background: -o-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); 
 
    background: -ms-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); 
 
    background: linear-gradient(to right, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c2c2c', endColorstr='#131313', GradientType=1); 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    color: white; 
 
} 
 

 
#leftDiv { 
 
    display: inline-block; 
 
    width: 18%; 
 
    height: 100%; 
 
    border-right: 3px solid white; 
 
    box-sizing: border-box; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: auto; 
 
} 
 

 
#deviceInfo { 
 
    min-height: auto; 
 
    margin: 0; 
 
    border-bottom: 3px solid white; 
 
    padding: 3px; 
 
    resize: vertical; 
 
    overflow: auto; 
 
} 
 

 
#settingsDiv { 
 
    margin: 0; 
 
    width: 100%; 
 
    min-height: 400px; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 3px; 
 
    overflow: auto; 
 
} 
 

 
#mainDiv { 
 
    display: inline-block; 
 
    width: 82%; 
 
    min-height: 100%; 
 
    box-sizing: border-box; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 3px; 
 
} 
 

 
.foo { 
 
    min-width: 250px; 
 
    max-width: 300px; 
 
    text-align: center; 
 
    min-height: 50px; 
 
    border: 1px solid white; 
 
    border-radius: 10px; 
 
    position: absolute; 
 
    padding: 0; 
 
} 
 

 
.thClass { 
 
    border-bottom: 1px solid white; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.tableConn { 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 

 
.close { 
 
    width: auto; 
 
    display: inline-block; 
 
    min-height: 100%; 
 
    float: right; 
 
    cursor: pointer; 
 
    margin-right: 3px; 
 
    margin-top: -2px; 
 
} 
 

 
#settingsDiv { 
 
    width: 100%; 
 
    overflow: auto; 
 
    box-sizing: border-box; 
 
} 
 

 
.settings { 
 
    border-radius: 5px; 
 
    float: left; 
 
    margin-left: 2px; 
 
} 
 

 
.settingsform { 
 
    padding: 5px; 
 
} 
 

 
.streamsettings { 
 
    width: auto; 
 
    min-width: 100px; 
 
} 
 

 
.leftset { 
 
    width: 20%; 
 
    min-width: 20px; 
 
} 
 

 
.rightset { 
 
    width: 300px; 
 
    min-width: 100px; 
 
} 
 

 
.streamsettings .rightset input { 
 
    width: 100%; 
 
} 
 

 
.addList { 
 
    width: 100px; 
 
    cursor: pointer; 
 
} 
 

 
.addList:hover { 
 
    text-decoration: underline; 
 
    color: antiquewhite; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<head runat="server"> 
 
    <title>Test</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
    <!DOCTYPE html> 
 

 
    <head runat="server"> 
 
    <title>Test</title> 
 
    <script src="jquery-3.2.1.js"></script> 
 
    <script src="jquery-ui.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.1.8/jsPlumb.js"></script> 
 
    <style> 
 
     .jsplumb-endpoint { 
 
     z-index: 10; 
 
     } 
 
    </style> 
 
    </head> 
 

 
    <body> 
 

 
    <div id="leftDiv" style="overflow: scroll;"> 
 
     <div id="deviceInfo"> 
 
     <button id="black">dark</button> 
 
     <button id="white">light</button> 
 
     <ul id="menu"> 
 
      <li>Device Name 
 
      <ul id="deviceName"> 
 
       <li> 
 
       itenisalm 1 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li>Interface 
 
      <ul id="interface"> 
 
       <li> 
 
       item 2 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li>Display 
 
      <ul id="display"> 
 
       <li> 
 
       item 3 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li>Output 
 
      <ul id="output"> 
 
       <li> 
 
       item 4 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     <button id="btn">create</button> 
 
     <input type="button" id="save" name="save" value="save" /> 
 
     <input type="button" id="load" name="load" value="load" /> 
 
     </div> 
 
     <div id="settingsDiv"> 
 

 
     </div> 
 
    </div> 
 
    <div id="mainDiv"> 
 

 
    </div>