如何阻止一个div，以便当我的鼠标悬停在这个div上时滚动x不会移动答案

【问题标题】：how to block a div so that the scroll x does not move when my mouse is over this div如何阻止一个div，以便当我的鼠标悬停在这个div上时滚动x不会移动
【发布时间】：2022-07-29 01:00:15
【问题描述】：

我在模态框内使用画布字段进行签名，但是在签名时，模态框默认具有的滚动会影响我。签名时如何使屏幕和模态的滚动都不会移动？有适合这种情况的风格吗？

【问题讨论】：

标签： html css

【解决方案1】：

如果您可以添加一个小的可重现样本，那将是有帮助的。否则，一种选择是一旦画布将鼠标悬停在其上方，（鼠标悬停事件）然后禁用模式滚动条（溢出：隐藏）。

const canvas = document.querySelector('canvas');
const container = document.querySelector('.container');

canvas.addEventListener('mouseover', function(e) {
  container.classList.add('disable-scroll');
});

canvas.addEventListener('mouseout', function(e) {
  container.classList.remove('disable-scroll');
});

div {
  max-height: 200px;
  overflow-y: scroll;
}

.disable-scroll {
  overflow: hidden;
}

canvas {
  border: 1px solid black;
}

<div class='container'>
  <p>Sroll to canvas</p>
  <p>Test scroll test</p>
  <p>Test scroll test</p>
  <p>Test scroll test</p>
  <p>Test scroll test</p>
  <p>Test scroll test</p>
  <canvas></canvas>
</div>

【讨论】：