エディタのようなものをつくってまして、例えば以下のようなマウスのホイールボタンの押下で要素を動かすようなイベントを作りたいのですが、スクロールバーが出ているときはスクロールが優先されて、要素がうまく動かせません。
何か上手い方法はございませんでしょうか。

コードスニペッド:

var a=document.createElement("div")
a.style.width=a.style.height="100px"
a.style.backgroundColor="blue"
a.style.top="500px"
a.innerHTML = "高さ確保用"

var b=document.createElement("div")
b.style.width=b.style.height="100px"
b.style.backgroundColor="red"
b.innerHTML = "中ボタンドラッグで移動"
a.style.position=b.style.position="absolute"
document.body.appendChild(a)
document.body.appendChild(b)

var drag=false
var preX
var preY
b.addEventListener("mousedown",(e)=>{
    if(e.button==1){
        drag=true
        preX=e.clientX
        preY=e.clientY
    }
})
window.addEventListener("mousemove",(e)=>{
    if(drag){
        b.style.left=(parseInt(b.style.left)||0 )+e.clientX-preX+"px"
        b.style.top=(parseInt(b.style.top ||0))+e.clientY-preY+"px"
        preX=e.clientX
        preY=e.clientY
    }
    
})
window.addEventListener("mouseup",()=>{
    drag=false
})
<html>
  <head><title></title></head>
  <body>
  </body>
</html>