0

我在我的网站上使用 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/

4

1 回答 1

2

这实际上是一个 webkit 问题。您可以在此处了解更多信息：如何防止在 WebKit/Blink 中为 OS X 触控板用户隐藏滚动条？.

我添加了以下 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);
}
于 2013-04-25T13:01:18.010 回答