如何在textarea的i-os设备中显示垂直滚动条?

时间:2012-07-19 10:43:48

标签: html scroll textarea

textarea中的垂直滚动条显示在I.E,FF和Chrome中,但不显示在ipod / ipad等i-os设备中。

<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>

如何解决此问题?

提前多多感谢。

2 个答案:

答案 0 :(得分:6)

就像迈克尔哈尔平所说的那样。将-webkit-overflow-scrolling: touch添加到您的样式中。

<强> 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

答案 1 :(得分:0)

它为我工作

::-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);}

希望这适合你