'Prevent browser from scrolling to select element when focusing

How can I prevent browser from scrolling when focusing? Here's my code:

select {
    width: 200px;
    height: 55em;
    overflow: auto;
}
<br><br><br><br><br><br><br><br><br>
<select multiple>
  <option selected="">Lorem</option>
  <option selected="">ipsum</option>
  <option selected="">dolor</option>
  <option selected="">sit</option>
  <option selected="">amet</option>
  <option selected="">Lorem</option>
  <option selected="">ipsum</option>
  <option selected="">dolor</option>
  <option selected="">sit</option>
  <option selected="">amet</option>
</select>

Try choosing an option or two.

javascripthtmlcss


Solution 1:[1]

UPDATED

As your requirement, I'd suggest you use position: fixed for the temporary body block (removed immediately with setTimeout)

With this solution, onfocus is good enough (no need to have onblur)

function blockScroller(event) {
  const body = document.getElementsByTagName("body")[0]
  body.classList.add("scroller-blocker")

  setTimeout(() => {
    body.classList.remove("scroller-blocker")
  })
}
select {
  width: 200px;
  height: 55em;
  overflow: auto;
}

.scroller-blocker {
  position: fixed;
  height: 100%;
}
<br><br><br><br><br><br><br><br><br>
<select multiple onfocus="blockScroller(event)">
  <option selected="">Lorem</option>
  <option selected="">ipsum</option>
  <option selected="">dolor</option>
  <option selected="">sit</option>
  <option selected="">amet</option>
  <option selected="">Lorem</option>
  <option selected="">ipsum</option>
  <option selected="">dolor</option>
  <option selected="">sit</option>
  <option selected="">amet</option>
</select>

OLD ANSWER

You can block the scroller with overflow: hidden on your element body

onfocus is triggered whenever an user focuses on a element

onblur is triggered whenever an user clicks outside of a focused element

Note that for mobile devices, you need to remove touchmove event for completely blocking screen moving

const touchMoveEvent = function(e) {
  e.preventDefault()
}

function blockScroller() {
  const body = document.getElementsByTagName("body")[0]
  body.classList.add("scroller-blocker")

  //avoid touch move event on mobile
  body.addEventListener('touchmove', touchMoveEvent)
}

function unblockScroller() {
  const body = document.getElementsByTagName("body")[0]
  body.classList.remove("scroller-blocker")

  //put the default behaviour of touch move event back 
  body.removeEventListener('touchmove', touchMoveEvent)
}
select {
  width: 200px;
  height: 55em;
  overflow: auto;
}

.scroller-blocker {
  height: 100%;
  overflow: hidden;
}
<br><br><br><br><br><br><br><br><br>
<select multiple onfocus="blockScroller()" onblur="unblockScroller()">
  <option selected="">Lorem</option>
  <option selected="">ipsum</option>
  <option selected="">dolor</option>
  <option selected="">sit</option>
  <option selected="">amet</option>
  <option selected="">Lorem</option>
  <option selected="">ipsum</option>
  <option selected="">dolor</option>
  <option selected="">sit</option>
  <option selected="">amet</option>
</select>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions