Прокрутка не работает в chrome для зависания

Я столкнулся с этой проблемой в хроме. Что я сделал, этоПрокрутка не работает в chrome для зависания

Кнопка на hover показывает div. У div есть полоса прокрутки, но при наведении курсора мыши на свитке скрывается div. Я не уверен, в чем проблема, но, похоже, работает отлично в firefox, IE11 и Edge. Он не работает в Opera и Chrome. Для лучшего понимания см. Ниже.

#container { 
 
    display:none; 
 
    width:100%; 
 
    height:200px; 
 
    background-color: red; 
 
    position:absolute; 
 
    overflow:auto; 
 
} 
 
#parent:hover #container { 
 
    display: block; 
 
} 
 
body { 
 
    overflow:auto; 
 
    height:600px; 
 
}

<div id="parent"> 
 
    <button> 
 
    test 
 
    </button> 
 

 
    <div id="container"> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
    </div> 
 
</div>

источник

2017-02-17 Saleem Khan

ли вы имеете в виду, когда вы пытаетесь прокрутить внутри DIV, то ДИВ становится скрытым? – ProEvilz

Я думаю, что он означает, что, как только вы наведете на полосу прокрутки внутри контейнера, контейнер скрывается. – jao

Спасибо Яо. Ваш правильный –

, если вы не хотите, положение контейнера абсолютное,

#container { 
 
    display:none; 
 
    width:100%; 
 
    height:200px; 
 
    background-color: red; 
 
    position:absolute; 
 
    overflow:auto; 
 
    right:0; 
 
} 
 
#parent:hover #container { 
 
    display: block; 
 
} 
 
body { 
 
    overflow:auto; 
 
    height:600px; 
 
}

<div id="parent"> 
 
    <button> 
 
    test 
 
    </button> 
 

 
    <div id="container"> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
    </div> 
 
</div>

источник

2017-02-17 19:33:24 ose

Ose Мне нужно положение, чтобы быть абсолютным, и оно не работает даже после изменения на относительное –

, попробуйте это правильно: 0; код запуска – ose

Nope не работает –

Это может быть из-за этого получать скрытые ОС.

Заменить это с помощью css.

#container::-webkit-scrollbar { 
    -webkit-appearance: none; 
} 

#container::-webkit-scrollbar:vertical { 
    width: 11px; 
} 

#container::-webkit-scrollbar-thumb { 
    border-radius: 8px; 
    border: 2px solid white; /* should match background, can't be transparent */ 
    background-color: rgba(0, 0, 0, .5); 
}

Попробуйте демо http://jsfiddle.net/Eh7xT/1130/

источник

2017-02-17 19:48:04 ProEvilz

Прокрутка не работает в chrome для зависания

ответ

Смежные вопросы