12

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

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

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

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

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

  • Error: User Rate Limit Exceeded

    от
  • Error: User Rate Limit Exceeded

    от
  • Error: User Rate Limit Exceeded

    от
  • Error: User Rate Limit Exceeded#myautoscroll { max-height: 200px; overflow-y: hidden; } #myautoscroll:hover { overflow-y: scroll; }

    от
  • Error: User Rate Limit Exceededstackoverflow.com/questions/27900053/…Error: User Rate Limit Exceeded

    от
  • Error: User Rate Limit Exceededjsfiddle.net/9scJE

    от
7 ответов
  • -1

    16mb

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

  • -1

    If you can use css to add overflow-y hidden in the normal view.Then yo

    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>

  • 4

    Попробуйте выбрать div с

    :hover селектор

    #div { overflow: hidden; }
    
    #div:hover { overflow:visible; }
    

  • 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 вместо того, чтобы переключать это.

  • 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/

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

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