CODEWITHSUNDEEP
javascript
User123123
User123123

Reputation: 573

Disable scrolling when hover a container

So, I'm trying to disable scrolling event when a user hovers on a container, there are some solutions on SO but they use jQuery and none of them seem to work or they are not the solution I'm looking for. I don't want to disable the scrollbar as that would cause bad user experience (scrollbar causing widths of the containers to increase/decrease). Is there any js way of achieving this? For example,

<body>
<div onScroll={()=> }>Container</div>
Content here
</body>

Upvotes: 0

Views: 925

Answers (1)

Mister Jojo
Mister Jojo

Reputation: 22275

that ?

const scroll_stopper = document.querySelector('#StopSrollonHover')

scroll_stopper.onmouseover = () =>
  {
  document.body.classList.add('noScroll')
  }
scroll_stopper.onmouseout = () =>
  {
  document.body.classList.remove('noScroll')
  }
.noScroll {
  overflow: hidden !important;
}
body {
  height: 200vh;
}
#StopSrollonHover {
  display    : block;
  margin-top : 25vh;
  height     : 100px;
  background :  yellow;
}
  <div id="StopSrollonHover">  </div>

Upvotes: 2

Related Questions