html - 如何在 i-os 设备中为 textarea 显示垂直滚动条？

Question

textarea 中的垂直滚动条在 IE、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>

如何解决这个问题？

提前非常感谢。

Answer 1

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

Answer 2

它对我有用

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

希望这对你有用