Почему скрывается только моя горизонтальная полоса прокрутки, а моя вертикальная полоса прокрутки - нет?

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть эти записи css…

 div { overflow: hidden; overflow-y: hidden; overflow-x: hidden;}
div:hover { overflow:visible; overflow-y: visible; overflow-x: visible;}

… надеясь, что вертикальные и горизонтальные полосы прокрутки будут появляться только при наведении курсора мыши на прямоугольник. Но вышесказанное работает только для моей горизонтальной полосы прокрутки.

Мышь за пределами прямоугольника: горизонтальная прокрутка скрыта, вертикальная видна

Мышь внутри san прямоугольника: появляется горизонтальная полоса прокрутки.

Обновление: html для моего списка:

 <nav>
  <ul>
    <li><a href=...>blah blah blah</a></li>
    <li><a href=...>blah blah blah</a></li>
    <li><a href=...>blah blah blah</a></li>
    ...
  </ul>
</nav>

Обновление: использование …

 div { overflow: hidden; overflow-y: hidden; overflow-x: hidden; width:300px;height:200px; }
div:hover { overflow:scroll; overflow-y: scroll; overflow-x: scroll;}

У меня не сработало. Вот как san выглядит мой прямоугольник, прежде чем я наведу на него курсор мыши:

Появляются как горизонтальные, так и вертикальные прокрутки. Вот как san выглядит мой прямоугольник при наведении курсора мыши:

Полосы прокрутки остаются, но текст исчезает!

Ответ №1:

Для полос прокрутки вам нужно использовать scroll not visible. Видимый показывает содержимое, прокрутка включает полосы прокрутки.

 div { overflow: hidden; overflow-y: hidden; overflow-x: hidden;

width:300px;height:200px;
}
div:hover { overflow:scroll; overflow-y: scroll; overflow-x: scroll;}

 <div>
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
</div>

1. У меня это не сработало. Текст внутри моих прямоугольников не был виден, пока я не навел курсор мыши на прямоугольник. Я обновил свой вопрос с помощью html, который я использую для списка.

Ответ №2:

используйте {overflow: -moz-scrollbars-none; } , если Firefox и ::-webkit-scrollbar { width: 0 !important } если Chrome / Safari или более новая Opera.