Форсировать диалог пользовательского интерфейса jQuery для отображения полос прокрутки

Question

Я использую диалоговые окна jQuery UI на своем сайте для отображения всплывающих окон. Формы, как правило, длиннее, чем модальная коробка, поэтому есть вертикальная прокрутка.

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

У меня пропал без вести. есть идеи как это сделать?

Вот HTML:

<p class="open-support-form">Click to request support</p> 
<div id="support-form" class="dialog" title="Request support"> 
    <p>Support line: 0800 123 4567</p> 
    <p>Email: helpdeskuk@company.com</p> 
    <p><a href="#">Screensteps manual</a></p> 
    <p>More content</p> 

</div> 

Вот JQuery:

// Support form 
jQuery("#support-form").dialog({ 
    autoOpen: false, 
    height: 500, 
    width: 500, 
    modal: true, 
    close: function() { 
     allFields.val("").removeClass("ui-state-error"); 
    } 
}); 

jQuery(".open-support-form") 
    .click(function() { 
     jQuery("#support-form").dialog("open"); 
    }); 

Вот моя скрипка: http://jsfiddle.net/NK4fM/1/

Answer 1

Это было на самом деле проблема WebKit. Вы можете узнать больше здесь: How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?.

Я добавил следующий CSS:

.ui-dialog-content::-webkit-scrollbar { 
    -webkit-appearance: none; 
    width: 11px; 
    height: 11px; 
} 

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