如何隱藏滾動條並在最大高度結束時顯示它？

Question

我有這樣的結構：

pre { 
 
\t word-warp: normal; 
 
\t display: block; 
 
\t padding: 5px 8px; 
 
\t width: auto; 
 
\t background-color: #eee; 
 
\t margin-bottom: 1em; 
 
\t max-height: 300px; 
 
\t line-height: 1.8; 
 
\t direction: ltr; 
 
\t 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>

其實我試圖創造一些酷似計算器代碼法的UI。我怎樣才能做到這一點？

Answer 1

您將需要爲x滾動條設置最大寬度，但是然後更改溢出：滾動到溢出：自動按您想要的方式工作。

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>