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?

Freemon

Scrolls for me in Mobile Safari. Maybe post some code. – Scriptural

@Scriptural Strange cuz for me and my frirnds who use Android, it does not scroll. – Freemon

developer.mozilla.org/en-US/docs/Web/CSS/… - Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. – Norm

Answer 1

add this css code to your container with overflow scroll.

-webkit-overflow-scrolling: touch;

Verner

this is more of a comment than an answer – Blende

I can't add a comment yet until I reach 50 reputation. – Verner

#rightbox form { width: 500px; overflow: scroll; -webkit-overflow-scrolling: touch; } – Verner

-webkit-overflow-scrolling: touch is invalid property value – Lorou

Works great in Chrome for Moto G5 Plus Android 8.1.0 (+1). – Begot

Answer 2

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.

Paltry

Answer 3

You can try it!

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

Bab

Answer 4

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

Frayda

Answer 5

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

Storybook