Question

我有一个绘图区域，当加载的图像不适合绘图区域时，滚动条将可见。我使用overflow: auto。

单击滚动条时，我需要禁用缩放按钮，从滚动条中释放鼠标时，需要启用缩放按钮。我还需要仅在按下drawingArea中的滚动条（鼠标向下）时禁用放大按钮，并在释放鼠标时启用（鼠标上移）。

HTML

<div id="drawingArea" style="overflow: auto" onscroll="disableandEnableZoom()" class="maxHeightAndWidth">
  <canvas id="frameDisplay" class="maxHeightAndWidth"></canvas>
</div>
<button id="zoomin" onclick="alert('zoomIn')">Click Me!</button>

JS

function disableandEnableZoom(){
    if(document.getElementById("drawingArea").onscroll){
        document.body.onmousedown = function() { 
            document.getElementById("zoomin").disabled = true;
        }
        document.body.onmouseup = function() {
            document.getElementById("zoomin").disabled = false;
        }
    }
}

Answer 1

如下面的简单示例所示，您可以在“顶部滚动”时禁用和启用缩放按钮。也可以在Example at Plnkr

获得示例

您无法完全处理浏览器中滚动按钮的单击。

var timer = null;   
document.getElementById('drawingArea').addEventListener('scroll', function() {
  if (timer != null) {
    document.getElementById("zoomin").disabled = true;
    clearTimeout(timer);
  }
  timer = setTimeout(function(){
    document.getElementById("zoomin").disabled = false;
  }, 150) 
});

获取滚动条mouseup和mousedown事件

1 个答案: