Javascript MEMO

スクロールバーが表示され、表示のみにする設定(書き換え禁止)

表示のみにする設定(書き換え禁止)

textareaを使用するケース

[サンプル]

ここに表示したいテキストを入力します。
このテキストは読み取り専用となります。
スクロールバーが表示されます。

readonly属性

overflow-y: scrollを指定

copy

<textarea class="readonly-textarea" readonly>
ここに表示したいテキストを入力します。
このテキストは読み取り専用となります。
スクロールバーが表示されます。
</textarea>

[CSS]
copy

.readonly-textarea 
{
  width: 300px;
  height: 150px;
  overflow-y: scroll;
}

overflow-x: scroll;	要素の横方向にはみ出した部分にスクロールバーを表示します。コンテンツが横方向にコンテナの幅に収まらない場合に、スクロールして全体を表示できます。
overflow: scroll;	overflow-xとoverflow-yを同時にscrollに設定した場合と同様に、縦横両方向にスクロールバーを表示します。
overflow: auto;	コンテンツがはみ出した場合にのみスクロールバーを表示します。 overflow: scroll;と異なり、常にスクロールバーが表示されるわけではありません。
overflow: hidden;	はみ出したコンテンツを非表示にします。スクロールバーは表示されません。

divを使用するケース

[サンプル]

ここに長文を設定します。このテキストはスクロール可能です。読み取り専用となっています。

テキストを複数行にわたり設定することで、スクロールバーを表示することが可能です。

以降にテキストを追加...

といった使い方になります。

[HTML]
copy

<div class="scrollable-div">
	<p>ここに長文を設定します。このテキストはスクロール可能です。読み取り専用となっています。</p>
	<p>テキストを複数行にわたり設定することで、スクロールバーを表示することが可能です。</p>
	<p>以降にテキストを追加...</p>
	<p>といった使い方になります。</p>
</div>

[CSS]
copy

.scrollable-div {
  width: 300px;
  height: 150px;
  overflow-y: scroll;
  user-select: none;
  /* Firefoxの場合、以下のプロパティも追加 */
  -moz-user-select: none;
  /* Safari, Chrome, Edgeの場合、以下のプロパティも追加 */
  -webkit-user-select: none;
  /* IE/Edgeの場合、以下のプロパティも追加 */
  -ms-user-select: none;
}

戻る

back

Scroll bars are displayed and the setting is for display only (no changes allowed)

Display only (no changes allowed)

When to use textarea

[Sample]

Enter the text you want to display here.
This text will be read-only.
A scrollbar will be displayed.

readonly attribute

overflow-y: specify scroll

copy

<textarea class="readonly-textarea" readonly>
Enter the text you want to display here.
This text is read-only.
A scrollbar will be displayed.
</textarea>

[CSS]
copy

.readonly-textarea 
{
  width: 300px;
  height: 150px;
  overflow-y: scroll;
}

overflow-x: scroll;	Displays a scrollbar on the part of the element that extends horizontally. If the content does not fit horizontally within the container width, you can scroll to view the whole content.
overflow: scroll;	Same as setting overflow-x and overflow-y to scroll at the same time, Scrollbars will be displayed in both the vertical and horizontal directions.
overflow: auto;	Scrollbars are displayed only if the content overflows. Unlike overflow: scroll;, scrollbars are not displayed all the time.
overflow: hidden;	Hides overflowing content. No scrollbars are displayed.

When to use div

[Sample]

Enter long text here. This text is scrollable. It is read-only.

By entering text across multiple lines, you can display scrollbars.

Add text below...

This is how it can be used.

[HTML]
copy

<div class="scrollable-div">
	<p>Enter long text here. This text is scrollable. It is read-only. </p>
	<p>By entering text across multiple lines, you can display scrollbars.</p>
	<p>Add text below...</p>
	<p>This is how it can be used. </p>
</div>

[CSS]
copy

.scrollable-div {
  width: 300px;
  height: 150px;
  overflow-y: scroll;
  user-select: none;
  /* For Firefox, also add the following property: */
  -moz-user-select: none;
  /* For Safari, Chrome, and Edge, add the following properties: */
  -webkit-user-select: none;
  /* For IE/Edge, also add the following property: */
  -ms-user-select: none;
}

back