На мобилке (где обычно узкий экран) ничего не надо делать, достаточно простого появления скролла из-за overflow-x: auto, на десктопе, если вдруг что-то не влезает - объясните про среднюю кнопку мыши - это тоже поведение по умолчанию.
Если же прям вообще никак-никак, то что-то подобное у меня работает так:
onMouseDown (e) {
const mapContainer = this.$refs.mapContainer // элемент, внутри которого скроллится
if (e.target.tagName !== 'svg') return // в то, что внутри svg можно тыкать мышью, таскаем только за пустое место
this.pos = { // это можно заменить на глобальную переменную
// текущая позиция скролла
left: mapContainer.scrollLeft,
top: mapContainer.scrollTop,
// текущее положение мыши
x: e.clientX,
y: e.clientY,
dragging: true
}
},
onMouseMove (e) {
if (!this.pos.dragging) return
const mapContainer = this.$refs.mapContainer
// смещение мыши
const dx = e.clientX - this.pos.x
const dy = e.clientY - this.pos.y
// скроллим
mapContainer.scrollTop = this.pos.top - dy
mapContainer.scrollLeft = this.pos.left - dx
},
onMouseUp () {
this.pos.dragging = false
},
