当滚动条上的可拖动元素时，Chrome 49会导致滚动

Question

这是Chrome 49与以前版本的变化。 49，如果我有一个可拖动的元素，当我将它拖到垂直滚动条上时，它会导致水平滚动条向右滚动，即使它不被接受。

$(document).ready(function() {
  $("#dragItem").bind("dragstart", function(e) {
    e.originalEvent.dataTransfer.setData("Text", 'data');
  });
});

#dropContainer {
  border: 1px solid black;
  overflow-x: auto;
  overflow-y: auto;
  width: 250px;
  height: 250px;
  display: inline-block;
}
#bigContent {
  width: 1000px;
  height: 1000px;
}
#dragSourceContainer {
  display: inline-block;
  vertical-align: top;
  margin-top: 20px;
}
#dragItem {
  border: 1px solid black;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropContainer">
  <div id="bigContent">
  </div>
</div>

<div id="dragSourceContainer">
  <div id="dragItem" draggable="true">
    drag me to the left, over top the vertical scrollbar
  </div>
</div>

JS小提琴： https://jsfiddle.net/a1qnbkeb/

我的问题是：如何在不做一些疯狂的临时滚动绑定的情况下停止此行为？我问这个的原因是因为在“dropContainer”中，我做允许拖动的东西，如果它们被拖放到“容器内”，我确实想要这种行为。

当他们从外面拖动新的时，我只是不想要它。