Javascript 滚动以移动传单地图

我一直在尝试不同的策略，使传单驱动的地图在滚动时平移，方式与拖动时相同，而不是缩放。我可以通过更高级别的domapi来实现这一点，听滚动事件和设置中心，但感觉不好，也无法与拖动地图的平滑度相比。是否有任何方法可以通过滚动来移动地图，滚动的感觉和拖动一样平滑？

您可以调整处理程序以执行地图平移而不是缩放

L.Map.ScrollWheelPan=L.Map.ScrollWheelZoom.extend({
_performZoom:function（）{
var map=此。_map，
δ=这个；
map.stop（）；//停止平移并飞行动画（如果有）
delta=delta>0？数学层（delta）：数学层（delta）；
delta=数学最大值（数学最小值（delta，4），-4）；
这个._delta=0；
这是.\u startTime=null；
if（！delta）{
返回；
}
map.panBy（[0，-delta*40]）；//根据您的感觉调整40。
}
});
L.Map.addInitHook（'addHandler'，'scrollWheelPan'，L.Map.scrollWheelPan'）；
var map=L.map（“map”{
滚轮缩放：错误，
滚轮平移：对
});

演示：

您可以调整处理程序以执行地图平移而不是缩放

L.Map.ScrollWheelPan=L.Map.ScrollWheelZoom.extend({
_performZoom:function（）{
var map=此。_map，
δ=这个；
map.stop（）；//停止平移并飞行动画（如果有）
delta=delta>0？数学层（delta）：数学层（delta）；
delta=数学最大值（数学最小值（delta，4），-4）；
这个._delta=0；
这是.\u startTime=null；
if（！delta）{
返回；
}
map.panBy（[0，-delta*40]）；//根据您的感觉调整40。
}
});
L.Map.addInitHook（'addHandler'，'scrollWheelPan'，L.Map.scrollWheelPan'）；
var map=L.map（“map”{
滚轮缩放：错误，
滚轮平移：对
});

---

演示：

声誉不足，无法发表评论，将我对Rishat评论的解释与ghybs的小提琴结合起来：

---

没有足够的声誉发表评论，将我对Rishat评论的解释与ghybs的小提琴结合起来：

---

您的解决方案只允许向上或向下滚动，但使用

Event#wheelDeltaX

和

Event#wheelDeltaY

，可以在任何方向滚动时平移，感觉非常平滑。谢谢你的想法，它帮助了很多@你能分享你的最终解决方案吗？我真的不知道在哪里使用wheelDeltaX/YY您的解决方案只允许向上或向下滚动，但是使用

Event#wheelDeltaX

和

Event#wheelDeltaY

，可以使其在任何方向滚动时平移，并且感觉非常平滑。谢谢你的想法，它帮助了很多@你能分享你的最终解决方案吗？我真的不知道在哪里使用wheelDeltaX/Y

// based on https://stackoverflow.com/questions/38898519/scroll-to-move-leaflet-map

let m = document.querySelectorAll('#map')[0];

L.DomEvent.on(m, 'wheel', function(e) {
  let x = e.deltaX;
  let y = e.deltaY;

  map.stop();
  map.panBy([x, y]);
})

L.Map.ScrollWheelPan = L.Map.ScrollWheelZoom.extend({
  _performZoom: function() {}
});

L.Map.addInitHook('addHandler', 'scrollWheelPan', L.Map.ScrollWheelPan);

var map = L.map("map", {
  scrollWheelZoom: false,
  scrollWheelPan: true
});
L.tileLayer("//stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg").addTo(map);

map.setView([48.85, 2.35], 3);