Отображение полос прокрутки только при наведении указателя мыши div

Ответ 1

Вы можете сделать переполнение скрытым до тех пор, пока мышь не закончится, а затем сделайте это автоматически. Это то, что я сделал... обратите внимание, что 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, а не переключать ее.

Ответ 2

Ответ с изменением переполнения имеет кучу проблем, таких как несогласованная ширина внутреннего блока, запуск 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: полоса прокрутки не будет отображаться сразу же при наведении курсора только при перемещении к другому элементу, и было бы труднее пропустить полосу прокрутки, когда она будет нацеливаться на нее с помощью курсора мыши, поскольку она не скроется сразу, как хорошо.

Ответ 3

Попробуйте выбрать div с помощью :hover селектора

#div { overflow: hidden; }

#div:hover { overflow:visible; }

Ответ 4

У меня была такая же проблема, и я не испробовал кучу вышеупомянутых решений. После многих исследований я пришел к этому решению. Просто вставьте эти строки в свой файл 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/

Ответ 5

Я придумал это решение. В основном отрицательная маржа отсекает вертикальную полосу прокрутки.

.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 и добавьте класс к элементу, который нуждается в отключении полосы прокрутки.

Ответ 6

Если вы можете использовать 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>

Ответ 7

#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>