スクロールボタンのスクロールをキャンセルする方法


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

コードスニペッド:

[code]

    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
    })
[/code]

[code]

    <html>
      <head><title></title></head>
      <body>
      </body>
    </html>
[/code]




mousedown  
デフォルトの動作  
ドラッグ/ドロップ操作を開始する、テキスト選択を開始する、（サポートされている場合、中ボタンと組み合わせて）スクロール/パンを開始する等。(MDN web
docsより)  
デフォルトの動作キャンセルにより問題は解決しました。

