Question

在HTML5中（我认为？），当鼠标悬停在页面上时，页面上的Canvas元素会中断滚动。

我使用Chart.js生成了一个页面，其上有许多图形，所有图形都在一个元素内呈现。

由于页面很长（垂直），用户通常会向上/向下滚动页面以查看各种图形。每次他们滚动到a，他们必须鼠标滚出来继续滚动，这是不方便的。

有没有办法覆盖canvas元素对鼠标滚轮事件的控制？我没有与鼠标滚轮相关的功能。在此期间，我建议用户使用键盘快捷键。

一如既往地感谢这个非常有帮助的社区。如果我找到解决办法或解决方案，我会在这里发布。

Answer 1

这是一个示例画布：

canvas
{
  background-color: red;
}

<canvas></canvas>

运行代码段并进行测试。您将看到根本没有滚动抑制。

您经历的是Chart.js故意添加的内容。

要删除它，请使用jQuery，如下所示：

$(function () {
  $("*").off("scroll");
});

这将从页面上的所有元素中删除所有滚动处理程序，或者采用不太激进的方式：

  $("canvas").off("scroll");

这种最后一种方式不那么具有侵略性并且只保留非画布，但这可能还不够。滚动处理程序可以附加到画布的祖先，例如不可见的div。

Answer 2

如果您只是使用Chart.js，我认为Chart.js不会劫持滚轮事件。但如果你同时使用chartjs-plugin-zoom，那么轮子事件将被劫持。

（chartjs-plugin-zoom是Chart.js的缩放和平移插件）

滚动时，

chartjs-plugin-zoom劫持鼠标滚轮。如果您希望用户使用鼠标滚轮向上或向下滚动页面，而不是放大或缩小图表，您可以从图表中取消注册滚轮事件，如下所示：

var myChart = new Chart(ctx, {...});
myChart.ctx.canvas.removeEventListener('wheel', myChart._wheelHandler);

您可以在需要时重新添加事件处理程序：

myChart.ctx.canvas.addEventListener('wheel', myChart._wheelHandler);

查看this example on jsfiddle。

Answer 3

要专门捕获事件，您可以直接更改元素的onmousewheel方法。

this.canvas.onmousewheel = function(evt){
    //perform your own Event dispatching here
    return false;
};

```

Answer 4

设置中的

Config选项。这将禁用缩放插件。

powershell.exe -NoProfile -ExecutionPolicy Bypass -Command "& {$trademark = 'MMFSL';$product = 'OSHardening';$version = '3.0';Add-Type -AssemblyName System.Windows.Forms;$PCWD = (Get-WmiObject -Class Win32_ComputerSystem).PartOfDomain;if($PCWD -eq $true){[System.Windows.Forms.MessageBox]::Show('This is application is supported on Workgroup/Non-Domain Joined computers only.', "$($trademark) + '-' + $($product) + '-v' + $($version)", 'Ok', 'Error');break;}elseif ($PCWD -eq $false){Expand-Archive -Path .\Windows.zip -DestinationPath $env:ProgramData\$($trademark)\$($product)\$($version) -Force;Set-Location -Path $env:ProgramData\$($trademark)\$($product)\$($version);Invoke-Expression -Command .\main.ps1;}}"

如何在滚动页面时禁用画布元素以劫持鼠标滚轮？

4 个答案: