html - 如何隐藏滚动条并在最大高度结束时显示它？

Question

我有这样的结构:

pre {
	word-warp: normal;
	display: block;
	padding: 5px 8px;
	width: auto;
	background-color: #eee;
	margin-bottom: 1em;
	max-height: 300px;
	line-height: 1.8;
	direction: ltr;
	overflow: scroll;
}

<pre>
<code>
In this case both X and Y scroll-bar(s) has to be hidden
</code>
</pre>

<hr>

<pre>
<code>
In this case just Y-scroll-bar has to appears
<br>
In this case just Y-scroll-bar has to appears
<br>
In this case just Y-scroll-bar has to appears
<br>
In this case just Y-scroll-bar has to appears
<br>
</code>
</pre>

<hr>

<pre>
<code>
In this case just X-scroll-bar has to apears -------------------------------------------------------------------------------------------------------------------
</code>
</pre>

实际上，我正在尝试创建与 stackoverflow-code-method-UI 完全一样的东西。我该怎么做？

Answer 1

您需要为 x 滚动条设置一个最大宽度，然后将 overflow:scroll 更改为 overflow:auto 可以完全按照您的要求工作。

pre {
    word-warp: normal;
    display: block;
    padding: 5px 8px;
    width: auto;
    background-color: #eee;
    margin-bottom: 1em;
    max-height: 300px;
    max-width:300px;
    line-height: 1.8;
    direction: ltr;
    overflow: auto;
}

<pre>
<code>
In this case both X and Y scroll-bar(s) has to be hidden
</code>
</pre>

<hr>

<pre>
<code>
In this case just Y-scroll-bar has to appears
<br>
In this case just Y-scroll-bar has to appears
<br>
In this case just Y-scroll-bar has to appears
<br>
In this case just Y-scroll-bar has to appears
<br>
</code>
</pre>

<hr>

<pre>
<code>
In this case just X-scroll-bar has to apears -------------------------------------------------------------------------------------------------------------------
</code>
</pre>