Учитывая это div:
<div style="overflow:auto;"></div>
Как я могу сделать полосы прокрутки видимыми только тогда, когда мышь находится над div?
Я не хочу, чтобы полосы прокрутки всегда отображались. Примером этого является правый верхний угол Facebook.
Вы можете сделать переполнение скрытым до тех пор, пока мышь не закончится, а затем сделайте это автоматически. Это то, что я сделал... обратите внимание, что 16px padding предполагает, что полоса прокрутки имеет ширину 16px, и есть ли текст, который не будет повторно обтекаться, когда появится полоса прокрутки.
div.myautoscroll {
height: 40ex;
width: 40em;
overflow: hidden;
border: 1px solid #444;
margin: 3em;
}
div.myautoscroll:hover {
overflow: auto;
}
div.myautoscroll p {
padding-right: 16px;
}
div.myautoscroll:hover p {
padding-right: 0px;
}
Посмотрите на действие в эту скрипту - вы захотите расширить окно "результата" правой стороны, чтобы увидеть всю ячейку, или уменьшите ширину в css.
Изменить 2014-10-23
В настоящее время существует больше различий в том, как системы и браузеры отображают полосы прокрутки, поэтому мне может понадобиться изменить пространство 16px для вашего случая. Цель этого дополнения заключается в том, чтобы предотвратить повторный поток текста, поскольку полоса прокрутки появляется и исчезает.
Некоторые системы, такие как более поздние версии Mac OS X (как минимум, 10.8.x), не показывают полосы прокрутки, пока вы не начнете прокрутку, которые могли бы отключить эту технику. Если полоса прокрутки не отображается, у вас нет причин скрывать ее до наведения, или вы можете оставить переполнение как auto или даже scroll, а не переключать ее.
Ответ с изменением переполнения имеет кучу проблем, таких как несогласованная ширина внутреннего блока, запуск reflow, необходимость иметь дополнительный код для работы с paddings и без отключения клавиатуры (и, возможно, других) взаимодействий, когда нет парил.
Существует более простой способ получить тот же эффект, который бы не вызывал повторение: использование свойства visibility и вложенных блоков:
.scrollbox {
width: 10em;
height: 10em;
overflow: auto;
visibility: hidden;
}
.scrollbox-content,
.scrollbox:hover {
visibility: visible;
}
Вот ручка с рабочим примером: http://codepen.io/kizu/pen/OyzGXY
Другая особенность этого метода заключается в том, что visibility является анимированным, поэтому мы можем добавить к нему переход (см. второй пример в ручке выше). Добавление перехода было бы лучше для UX: полоса прокрутки не будет отображаться сразу же при наведении курсора только при перемещении к другому элементу, и было бы труднее пропустить полосу прокрутки, когда она будет нацеливаться на нее с помощью курсора мыши, поскольку она не скроется сразу, как хорошо.
Попробуйте выбрать div с помощью :hover селектора
#div { overflow: hidden; }
#div:hover { overflow:visible; }
У меня была такая же проблема, и я не испробовал кучу вышеупомянутых решений. После многих исследований я пришел к этому решению. Просто вставьте эти строки в свой файл css.
div.myautoscroll {
height: 40ex;
width: 40em;
overflow: hidden;
border: 1px solid #444;
margin: 3em;
}
div.myautoscroll:hover {
overflow: auto;
}
div.myautoscroll p {
padding-right: 16px;
}
div.myautoscroll:hover p {
padding-right: 0px;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Что со мной произошло, так это то, что Mac OSX lion и up (я использую Yosemite) автоматически скрывают полосы прокрутки, чтобы казаться более гладкими. Приведенный выше код перезаписывает значение по умолчанию и возвращает панель прокрутки... в сочетании с css для изменения переполнения для прокрутки при зависании это приведет к желаемому результату для пользователей на более новых ОС Mac OSX. Вот скрипка (не моя, а та, где я нашел этот ответ). http://jsfiddle.net/simurai/UsvLN/
Я придумал это решение. В основном отрицательная маржа отсекает вертикальную полосу прокрутки.
.hidden-scrollbar {
padding-right: 50px;
margin-right: -25px;
overflow-y: auto;
}
.hidden-scrollbar.hover-scrollbar:hover {
padding-right: 25px;
margin-right: 0;
overflow-y: auto;
}
LESS mixin
.hidden-scrollbar(@padding) {
padding-right: 2 * @padding;
margin-right: [email protected];
overflow-y: auto;
&.hover-scrollbar:hover {
padding-right: @padding;
margin-right: 0;
}
}
ПРИМЕЧАНИЕ: @padding должно быть, по крайней мере, шириной полосы прокрутки (например, 25px)
В основном добавьте это в свой LESS/CSS и добавьте класс к элементу, который нуждается в отключении полосы прокрутки.
Если вы можете использовать css для добавления overflow-y, скрытого в обычном представлении. Затем вы можете добавить событие: hover add overflow-y: auto.
Если вы можете использовать Jquery, используйте событие hover
Отрывок:
jQuery(".main_panel").hover(
function() {
jQuery(this).addClass("show_cont");
},
function() {
jQuery(this).removeClass("show_cont");
}
);.main_panel {
width: 300px;
height: 200px;
display: block;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.limt {
padding: 0;
display: inline-block;
width: 90%;
margin: 0;
}
ul.limt li {
display: inline-block;
width: 100%;
font-size: 18px;
line-height: 28px;
}
.show_cont {
overflow-y: auto;
}<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="main_panel">
<ul class="limt">
<li>Curabitur aliquet quam id dui posuere blandit.</li>
<li>Curabitur aliquet quam id dui posuere blandit.</li>
<li>Curabitur aliquet quam id dui posuere blandit.</li>
<li>Curabitur aliquet quam id dui posuere blandit.</li>
<li>Curabitur aliquet quam id dui posuere blandit.</li>
</ul>
</div>
#dv a{
background:url(http://dhavalvachhani.16mb.com/images/Dhaval-Vachhani.png) 0 0 no-repeat;
background-size: 100%;
display:block;
text-align: center;
color: #fff;
padding-top: 20px;;
width:500px;
height:300px;
-webkit-transition: background-position 5s ease-in-out;
-moz-transition: background-position 5s ease-in-out;
-ms-transition: background-position 5s ease-in-out;
-o-transition: background-position 5s ease-in-out;
transition: background-position 5s ease-in-out;
}
#dv a:hover {
background-position:0px 100%;
}<div id="dv">
<a href="#" onclick="location.href='http://dhavalvachhani.16mb.com/'; return false;" target="_blank"></a>