Ukryj pasek przewijania CSS, jeśli nie jest potrzebny

435

Próbuję wymyślić, jak mogę ukryć, overflow-y:scroll;jeśli nie jest to potrzebne. Mam na myśli to, że tworzę stronę internetową i mam główny obszar, w którym posty będą wyświetlane, i chcę ukryć pasek przewijania, jeśli zawartość nie przekracza bieżącej szerokości.

Także moje drugie pytanie. Chcę to zrobić, aby gdy posty przekroczyły aktualną szerokość, szerokość zwiększy się automatycznie, a zawartość nie wyjdzie z pudełka.

Czy ktoś ma jakiś pomysł, jak to zrobić?

Obszar postów:

.content {
    height: 600px;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    font-size: 15px;
    text-align: justify;
    line-height: 19px;
    overflow-y:scroll;
}

Kontener głównej strony:

.container {
    margin: 0 auto;
    width: 757px;
    margin-top: 30px;
    text-align: center;
}
html css Thanos Paravantis
źródło
Czy chcesz ukryć pionowy lub poziomy pasek przewijania? Czy możesz zamieścić przykład z kodem HTML na, np. Jsfiddle.net i link do niego tutaj
RJo 10.09.13
Witam, opublikowałem 2 klasy, z których korzystam. W html nie ma nic prócz wywoływania klas.
Thanos Paravantis,

Odpowiedzi:

743

Ustaw overflow-ywłaściwość na autolub usuń ją całkowicie, jeśli nie jest dziedziczona.

RJo
źródło
Mógłbym, ale potrzebuję pomocy z moim drugim pytaniem, także o szerokości, automatycznym zwiększaniu.
Thanos Paravantis,
Zawsze możesz spróbować skorzystać z wyszukiwania
stosu
Gdzie jest przewijany w twoich przykładach?
Zielony
13
Podczas ustawiania overflow-y: autorozwiązanego mojego problemu - link nie pokazuje takiego przykładu ...
Shadow
2
Należy pamiętać, że overflow-x: autodziała również w celu ukrycia poziomych pasków przewijania.
Edward D'Souza,
40

Możesz użyć overflow:auto;

Możesz także sterować osią x lub y indywidualnie za pomocą overflow-xoverflow-y właściwości i .

Przykład:

.content {overflow:auto;}
.content {overflow-y:auto;}
.content {overflow-x:auto;}
Ayyappan K.
źródło
20
Chociaż dziękujemy za odpowiedź, byłoby lepiej, gdyby stanowiła dodatkową wartość oprócz innych odpowiedzi. W takim przypadku Twoja odpowiedź nie zapewnia dodatkowej wartości, ponieważ inny użytkownik już opublikował to rozwiązanie. Jeśli poprzednia odpowiedź była dla Ciebie pomocna, powinieneś głosować zamiast powtarzać te same informacje.
Toby Speight
9

Do przepełnienia możesz użyć zarówno .content, jak i .container: auto. Oznacza, że ​​jeśli jego tekst zostanie przekroczony, przewijanie nastąpi po osi X i osi Y. (nie trzeba podawać oddzielnej osi X, a oś Y zwykle powoduje przepełnienie: auto)

.content {overflow: auto;}

Ayyappan K.
źródło
5 
.selected-elementClass{
    overflow-y:auto;
}
Prateek Arora
źródło
1

.container {overflow: auto;} załatwi sprawę. Jeśli chcesz kontrolować określony kierunek, powinieneś ustawić auto dla tej konkretnej osi. AE

.container {overflow-y: auto;} .container {overflow-x: hidden;}

Powyższy kod ukryje wszelkie przelewy na osi X i generuje pasek przewijania, gdy jest to potrzebne na osi Y. Ale musisz się upewnić, że domyślna wysokość jest mniejsza niż wysokość kontenera; jeśli nie, pasek przewijania nie zostanie ukryty.

Neero
źródło