Вопрос по html, css – Отображение полос прокрутки только при наведении мыши на div

12

Учитывая этоdiv:

<div style="overflow:auto;"></div>

Как я могу сделать полосы прокрутки видимыми только когда мышь находится над div?

Я не хочу, чтобы полосы прокрутки появлялись всегда. Правый верхний угол Facebook является примером этого.

Ваш Ответ

7   ответов
13

таких как непоследовательная ширина внутреннего блока, запуск перекомпоновки, необходимость иметь дополнительный код для работы с отступами и без отключения клавиатурных (и, возможно, других) взаимодействий, когда они не находятся.

Существует более простой способ получить тот же эффект, который никогда не будет вызывать оплавление: использованиеvisibility собственность и вложенные блоки:

.scrollbox {
  width: 10em;
  height: 10em;
  overflow: auto;
  visibility: hidden;
}
.scrollbox-content,
.scrollbox:hover {
  visibility: visible;
}

Вот ручка с рабочим примером:http://codepen.io/kizu/pen/OyzGXY

Еще одна особенность этого метода заключается в том, чтоvisibility является анимируемым, поэтому мы можем добавить к нему переход (см. второй пример на рисунке выше). Добавление перехода было бы лучше для UX: полоса прокрутки не будет появляться сразу при наведении курсора, просто при перемещении к другому элементу, и будет сложнее пропустить полосу прокрутки при наведении на нее курсором мыши, поскольку она не будет сразу скрываться как Что ж.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededstackoverflow.com/questions/27900053/…Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
-1

u can add the :hover event add overflow-y:auto.

See This Link

If you can use Jquery use the hover event

See This Fiddle

Snippet:

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>

Error: User Rate Limit Exceeded
4

:hover селектор

#div { overflow: hidden; }

#div:hover { overflow:visible; }
0

отрицательное поле отсекает вертикальную полосу прокрутки.

.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;
    }
}

NOTE: @padding should be at least the scrollbar width (e.g. 25px)

По сути, добавьте это к вашему LESS / CSS и добавьте класс к элементу, который нуждается в обрезке полосы прокрутки.

0

и я попробовал кучу вышеуказанных решений безрезультатно. После долгих исследований я пришел к этому решению. Просто вставьте эти строки в ваш 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 и выше (я использую Yosemite) автоматически скрывают полосы прокрутки, чтобы казаться более гладкими. Приведенный выше код перезаписывает значение по умолчанию и возвращает полосу прокрутки ... в сочетании с css для изменения переполнения для прокрутки при наведении курсора, это достигнет желаемого результата для пользователей на более новых Mac OSX. Вот скрипка (не моя, а та, где я нашел этот ответ).http://jsfiddle.net/simurai/UsvLN/

-1

#dv a{
    background:url(http://dhavalvachhani..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="http://dhavalvachhani..com/" target="_blank"></a>

26

пока мышь не наведет курсор на него, а затем сделать его автоматическим. Это то, что я сделал ... обратите внимание, что для отступа 16px предполагается, что полоса прокрутки имеет ширину 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), не показывают полосы прокруткиuntil you start scrolling что может отбросить всю эту технику. Если полоса прокрутки не отображается, возможно, у вас нет причин скрывать ее до наведения, или вы можете оставить переполнение какauto или дажеscroll вместо того, чтобы переключать это.

Error: User Rate Limit Exceeded#myautoscroll { max-height: 200px; overflow-y: hidden; } #myautoscroll:hover { overflow-y: scroll; }
Error: User Rate Limit Exceededjsfiddle.net/9scJE

Похожие вопросы