how to block a div so that the scroll x does not move when my mouse is over this div

user_18920599 0
Viewed 30

I am using a canvas field for a signature within a modal, but when signing, the scroll that the modal has by default affects me. How can I do so that neither the screen nor the scroll of the modal moves when signing? Is there a style for that case?

css html
1 Answers

If you can add a small reproducible sample that would be helpful. Otherwise one option would be once the canvas has the mouse over it, (mouseover event) then disable the modals scroll bar (overflow: hidden).

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>

user_3223950
Related