強制jQuery UI對話框顯示滾動條

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