Umieść pasek przewijania poza div z automatycznym przepełnieniem

Question

Mam mały div z overflow:auto;, ale gdy pojawi się pasek przewijania, pokrywa on dużą część elementu div. Można tego uniknąć, używając overflow:scroll;, ale wtedy pojawia się brzydki wyblakły pasek przewijania, gdy nie ma przepełnienia. Czy istnieje sposób umieszczania paska przewijania poza elementem div bez używania overflow:scroll;? Dzięki.

o to demonstracja jsfiddle

.alphabet{ display:inline-block; 
      overflow-y:auto; 
      overflow-x:hidden; 
      border:1px solid; 
      height:50; 
     } 

<div class = "alphabet">abcdefgh<br> 
         ijklmnop<br> 
         qrstuvwx 
</div> 

Answer 1

Jeśli istnieje opcja użycia elementu kontenera wokół .alphabet, możesz ustawić pionowy zwój na tym. Dodałem <hr>, aby sfałszować zawsze widoczną dolną ramkę, która nie będzie również pod paskiem przewijania.

HTML:

<div class="container"> 
    <div class="alphabet"> 
     abcdefgh<br /> 
     abcdefgh<br /> 
     abcdefgh<br /> 
     abcdefgh<br /> 
    </div> 
</div> 
<hr> 

CSS:

.container{ 
    overflow-y:auto; 
    overflow-x:hidden; 
    height:50px; 
    width:100px; 
} 

.alphabet{   
    width:100%; 
    overflow:visible; 
    box-sizing:border-box; 
    border:1px solid; 
    border-bottom:0; 
} 

hr{ 
    margin:0; 
    height:0; 
    width:85px; 
    border:0; 
    border-bottom:1px solid; 
} 

Z wewnętrznej granicy: http://jsfiddle.net/Q32gG/1/

Jeśli nie faktycznie dbają o przewijania pokazując wewnątrz granicy, można upuść <hr> i zamiast tego dodaj pełną granicę do .container (http://jsfiddle.net/V3MbV/3/).

Answer 2

Zamiast używania i poza-przewijania, dlaczego nie korzystać z niektórych prawy dopełnienie jako tak

.alphabet{ display:inline-block; 
       overflow-y:auto; 
       overflow-x:hidden; 
       border:1px solid; 
       height:50; 
       padding-right:15px; 
      } 

Lub jeśli wolisz, używając jednostek em, aby dopasować znak niezależnie od używanego rozmiaru:

padding-right:1em; 

PD: Przy okazji tam to literówka w twoim przykładzie. Okres powinien być wcześniejszy. Powinno to być. {