Comment garder la barre de défilement masquée et l'afficher lorsque la hauteur maximale est atteinte?

Question

J'ai une structure comme celle-ci:

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>

En fait, je suis en train de créer quelque chose exactement comme stackoverflow code-méthode-UI. Comment puis je faire ça?

Answer 1

Vous devrez définir une largeur maximale pour la barre de défilement x, mais en modifiant le dépassement de capacité: faites défiler jusqu'à déborder: la fonction auto fonctionne exactement comme vous le souhaitez.

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>