Css overflow:scroll does not work on mobile

Question

I have a website and I want to display comments in a div. I tried to use an overflow scroll div but it overflowed on mobile devices. It does work on my computer What am I doing wrong?

@thingEvery Strange cuz for me and my frirnds who use Android, it does not scroll. — kahveciderin, Feb 28 '20 at 04:56

score 10 · Accepted Answer · answered Feb 28 '20 at 05:42

10

add this css code to your container with overflow scroll.

-webkit-overflow-scrolling: touch;

answered Feb 28 '20 at 05:42

zaphkiel

140
1
2

this is more of a comment than an answer – sudo97 Feb 28 '20 at 05:54
I can't add a comment yet until I reach 50 reputation. – zaphkiel Feb 28 '20 at 06:21
#rightbox form { width: 500px; overflow: scroll; -webkit-overflow-scrolling: touch; } – zaphkiel Feb 28 '20 at 07:00
13

`-webkit-overflow-scrolling: touch` is invalid property value – Ivan Aug 04 '21 at 11:03
Works great in Chrome for Moto G5 Plus Android 8.1.0 (+1). – Jose Manuel Abarca Rodríguez Mar 06 '23 at 20:55

score 0 · Answer 2 · edited Jun 25 '21 at 10:50

0

You can try it!

overflow-y: scroll !important;
-webkit-overflow-scrolling: touch;

edited Jun 25 '21 at 10:50

Josef

2,869
2
22
23

answered Jun 25 '21 at 02:36

Vu Duc Huy

1

score 0 · Answer 3 · answered Sep 17 '21 at 20:11

0

overflow: scroll; // this property will work on mobile devices for scroll instead of ove

answered Sep 17 '21 at 20:11

waqas chughtai

19
5

score 0 · Answer 4 · answered Jun 10 '22 at 19:26

0

using -webkit-overflow-scrolling: touch; is the correct solution but it invalid in react, next you would need to use WebkitOverflowScrolling: "touch"

answered Jun 10 '22 at 19:26

Mohammad Ameer

49
2
7

score 0 · Answer 5 · answered Jun 02 '23 at 09:34

How i solved that, i strugled a lot and finally i put in html css media query next code

@media screen and (max-width: 700px) {
  html {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    max-width: 100vw !important;
    overflow: hidden !important;
    overflow-y: auto !important;
  }
  html ::-webkit-scrollbar {
    display: none;
  }
}

Dont use -webkit-overflow-scrolling: touch; !

In yours case make similar media query for your div element and adjust values by yours requirements.

I hope will be helpfull.

Css overflow:scroll does not work on mobile

5 Answers5