Prevent user scrolling but allow scrolling via JavaScript

Question

I have a scrollable <div> and I need to prevent the user from scrolling. But at the same time, JavaScript should be allowed to scroll it.

Previously, I've tried setting overflow: hidden; but in some browsers/os it didn't let JavaScript scroll. I've tried setting overflow: auto; and hiding the scrollbar and then in JavaScript listening for wheel events and calling preventDefault() but that did nothing. I can't listen for scroll events because then it prevents JavaScript from scrolling too.

const btn = document.querySelector('button#scroll');
const cnt = document.querySelector('div#container');

btn.addEventListener('click', e => {
  cnt.scrollTo(20, 500);
});

div#container {
  width: 400px;
  height: 400px;
  overflow-y: auto;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
div#container::-webkit-scrollbar {
  display: none;
}

<button id="scroll">Click to scroll</button>

<div id="container">
  <img src="https://p.turbosquid.com/ts-thumb/bK/x6a3nk/nlMteHHm/r1/jpg/1590782525/600x600/fit_q87/f469b1b09d4935ef73b0746eb4b77fbe06b57293/r1.jpg">
  <br>
  <img src="https://p.turbosquid.com/ts-thumb/bK/x6a3nk/nlMteHHm/r1/jpg/1590782525/600x600/fit_q87/f469b1b09d4935ef73b0746eb4b77fbe06b57293/r1.jpg">
  <br><img src="https://p.turbosquid.com/ts-thumb/bK/x6a3nk/nlMteHHm/r1/jpg/1590782525/600x600/fit_q87/f469b1b09d4935ef73b0746eb4b77fbe06b57293/r1.jpg">
  <br><img src="https://p.turbosquid.com/ts-thumb/bK/x6a3nk/nlMteHHm/r1/jpg/1590782525/600x600/fit_q87/f469b1b09d4935ef73b0746eb4b77fbe06b57293/r1.jpg">
  <br><img src="https://p.turbosquid.com/ts-thumb/bK/x6a3nk/nlMteHHm/r1/jpg/1590782525/600x600/fit_q87/f469b1b09d4935ef73b0746eb4b77fbe06b57293/r1.jpg">
  <br><img src="https://p.turbosquid.com/ts-thumb/bK/x6a3nk/nlMteHHm/r1/jpg/1590782525/600x600/fit_q87/f469b1b09d4935ef73b0746eb4b77fbe06b57293/r1.jpg">
  <br><img src="https://p.turbosquid.com/ts-thumb/bK/x6a3nk/nlMteHHm/r1/jpg/1590782525/600x600/fit_q87/f469b1b09d4935ef73b0746eb4b77fbe06b57293/r1.jpg">
  <br><img src="https://p.turbosquid.com/ts-thumb/bK/x6a3nk/nlMteHHm/r1/jpg/1590782525/600x600/fit_q87/f469b1b09d4935ef73b0746eb4b77fbe06b57293/r1.jpg">
  <br>
</div>

Any ideas? TYIA

Do you have some set-up code we can use? I can't be bothered to spend 5 minutes writing it myself. It's also in how to ask. — k.tten
– k.tten, Commented Oct 22, 2022 at 13:42
devforhelp.com/code2.html can you check here but the problem is it scrolling only once. Do you want to scroll every time onClick ? also I have tested on iPhone 13 it seems working — Sanjay Singh
– Sanjay Singh, Commented Oct 22, 2022 at 14:11
@devforhelp that's good, if you post the code in an answer I'll accept it — LuisAFK
– LuisAFK, Commented Oct 22, 2022 at 14:16

user9077625 · Accepted Answer · 2022-10-22 14:00:42Z

2

You can use overflow-y: hidden to make sure the scrolling position can only be changed by javascript.

answered Oct 22, 2022 at 14:00

user9077625

Sign up to request clarification or add additional context in comments.

Comments

Sanjay Singh · Accepted Answer · 2022-10-22 14:17:53Z

1

view-source:https://devforhelp.com/code2.html

Please open the link and check the source code

answered Oct 22, 2022 at 14:17

Sanjay Singh

628 bronze badges

2 Comments

A Haworth Over a year ago

Please put the code, plus an explanation of how it solves the problem, into your answer, otherwise there is a danger that your answer will be useless to future readers e.g.should your personal site disappear.

Sanjay Singh Over a year ago

Thank you and I will make sure from next time

Collectives™ on Stack Overflow

Prevent user scrolling but allow scrolling via JavaScript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related