How to show vertical scrollbar in i-os devices for textarea?

Question

The vertical scroll bar in textarea is displaying in I.E,FF and Chrome but not in i-os devices like ipod/ipad.

<textarea  id="termsConditions" cols="30" rows="5" readonly="readonly">Sample text sample           text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample</textarea>

How to resolve this problem?

Thanks a lot in advance.

see this answer: Does that help you? – x - y Aug 04 '12 at 03:37 — x - y, Aug 04 '12 at 03:37

score 6 · Answer 1 · edited Jun 12 '17 at 14:05

Just as Michael Halpin has said. Add -webkit-overflow-scrolling: touch into your styles.

HTML

<textarea  id="termsConditions" cols="30" rows="5" readonly="readonly">Sample text sample           text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample</textarea>

CSS

#termsConditions {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

DEMO

score 0 · Answer 2 · edited Sep 10 '18 at 10:00

0

it Is worked for me

::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px;}
::-webkit-scrollbar-thumb {border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}

Hope this works for you

edited Sep 10 '18 at 10:00

Debabrata

124
1
10

answered Apr 18 '18 at 12:01

Thomas Mathew

235
2
9

this only work in Windows but not working in iOS as original question – Kardi Teknomo Apr 23 '19 at 06:02

How to show vertical scrollbar in i-os devices for textarea?

2 Answers2