javascript - 无法在 Safari 中检测到鼠标滚轮事件

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 中无效。有什么问题？

编辑:.foo 元素没有显示属性。这会是个问题吗？由于我的应用程序的功能，我不想设置它。

编辑 2:我创建了 jsfiddle 来玩代码。它相当大，但我们只需要 javascript block 中的第一个函数。

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>