

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

コードスニペッド:

[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]


CC BY-SA 3.0
2018-02-07T06:28:01.787
41536
2018-02-07T18:42:52.407
2018-02-07T18:42:52.407
27317
question
javascript
スクロールボタンのスクロールをキャンセルする方法


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


CC BY-SA 3.0
2018-02-07T13:02:03.930
41544
2018-02-07T13:02:03.930
27317
41536
answer