как скрыть вертикальную полосу прокрутки, когда она не нужна

97

У меня есть текстовое поле, которое содержится в div, поскольку у меня есть подсказка jquery, и я хотел использовать непрозрачность без изменения границы. Есть видимая вертикальная полоса прокрутки, и я хочу, чтобы она отображалась только тогда, когда я набираю текст в текстовом поле и выходит за пределы контейнера. Я пробовал переполнение: авто; но не работает.

Текстовое поле:

<label>
    <div id="name">
        <textarea name="message" type="text" id="message"
            title="Enter Message Here"
            rows=9 cols=60 maxlength="2000"></textarea>
    </div>
</label>

Стили:

#name { 
    border: 1px solid #c810ca;
    width: 270px;
    height:159px;
    overflow: hidden; 
    position: relative;
    }

#message {
    height: 400px;
    width: 235px;
    overflow: hidden;
    position: absolute;
}
Лукус
источник
Возможный дубликат CSS скрыть полосу прокрутки, если она не нужна
Эрен Тантекин

Ответы:

201

overflow: auto(или overflow-y: auto) - правильный путь.

Проблема в том, что ваша текстовая область выше, чем ваш div. Div заканчивается тем, что обрезает текстовое поле, поэтому, хотя кажется, что он должен начать прокрутку, когда текст выше, чем 159pxон, не начнет прокручиваться, пока текст не станет выше, чем 400pxвысота текстового поля.

Попробуйте это: http://jsfiddle.net/G9rfq/1/

Я установил overflow: auto в текстовом поле и сделал текстовое поле того же размера, что и div.

Также я не считаю правильным иметь divвнутри a label, браузер будет его отображать, но это может вызвать некоторые забавные вещи. И ваш divне закрыт.

Дэви8
источник
Как заставить это решение работать, когда мы настроили полосу прокрутки с помощью псевдоэлемента -webkit-scrollbar. ? потому что, если переполнение происходит автоматически, элементы псевдоэлемента не работают .... Я хочу настроить свою полосу прокрутки, а также скрыть ее, когда она не нужна?
Kpatel1989
4

overflow: auto;или overflow: hidden;я думаю, должен это сделать.

Борис Бачовский
источник
Как я уже сказал в своем вопросе overflow: auto; не работает :(
Lukus
hidden скрывает полосу прокрутки, но как только текст проходит через div, она не отображает полосу прокрутки, поэтому не может прокручивать вниз, чтобы увидеть остальной текст
Lukus
Я только что протестировал, и он отлично работает. Какой браузер вы используете?
Борис Бачовский 05
Я использую firefox, но в IE скрытый показывает полосу прокрутки независимо от того, проходит ли текст в div, а с auto, когда он проходит контейнер DIV, полоса прокрутки не отображается
Лукус
Попробуйте добавить position: relative;на#name div
Борис Bachovski
2

Добавьте этот класс в класс .css

.scrol  { 
font: bold 14px Arial; 
border:1px solid black; 
width:100% ; 
color:#616D7E; 
height:20px; 
overflow:scroll; 
overflow-y:scroll;
overflow-x:hidden;
}

и используйте класс в div. как здесь.

<div> <p class = "scrol" id = "title">-</p></div>

Я прикрепил изображение, вы видите результат приведенного выше кода введите описание изображения здесь

Смельчак
источник