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,

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