3

コンテンツとともにスクロールするテキストエリアに背景画像を追加したいと思います。モバイル Safari 専用の HTML/JavaScript/CSS でプログラミングしています。

いろいろやってみましたが、どうにもうまくいきません。テキストエリアを画像の上に配置してから、テキストエリアがスクロールされるたびに背景画像をスクロールしようとしました。テキストを入力しているときは多かれ少なかれ問題なく動作しますが、ネイティブのスクロールバー (これを取り除きたくありません) により、モバイル Safari では難破したように見えます。

contentEditable div コンテナーを使用してみましたが、それも問題をスローするように見えました (再びスクロールで)。

スクロールする背景画像を持つネイティブスクロールのテキストエリアを持つことは可能ですか?

4

1 に答える 1

1

次のように、入力要素またはテキスト要素に背景画像を適用できます。

フィドルjsfiddleを確認してください

html

<div class="outer">
     <textarea></textarea>
  </div>

CSS

.outer { width: 310px; height: 250px; padding: 5px; border: 1px solid #666; -webikit-border-radius: 3px; -moz-border-radius: 3px; overflow:auto;overflow-x:hidden  }

textarea{
    background: #fff url('http://www.toddle.com/images/300_words_background.gif') 0 -220px no-repeat;
    width: 302px;padding:5px; height:99em;
}

注: 2 つの違いは、div 内のコンテンツ (正しくコーディングされている場合) が検索エンジンで使用可能なテキストとして含まれるのに対し、テキストエリアのコンテンツは含まれないことです。

于 2012-08-01T02:30:58.100 に答える