自定义 jquery ui 组合框的自定义滚动条答案

【问题标题】：custom scrollbar for custom jquery ui combobox自定义 jquery ui 组合框的自定义滚动条
【发布时间】：2020-03-20 08:22:00
【问题描述】：

我一直在研究组合框小部件一段时间，它的工作方式就像我也需要它一样......所以现在我想让它看起来更好，我想做的一件事是改变滚动条的外观。我已经尝试了几乎所有搜索无法找到的东西。这两个似乎是最有前途的，最容易实现的......

custom scrollbar 1

custom scrollbar 2

我已设法在下拉列表中检测到鼠标滚轮，但无法让列表滚动或添加可见滚动条...这是代码...

编辑：这是用于滚动菜单列表的更新代码...只需要弄清楚如何添加滚动条...

"wheel .ui-menu":function(event){
    var scrollTopEle=this.uiMenu.scrollTop();

    if (event.originalEvent.deltaY < 0){
      this.uiMenu.scrollTop(scrollTopEle-20);
    }else{
      this.uiMenu.scrollTop(scrollTopEle+20);
    }
    return false;       
},

还必须将 css overflow-y: auto; 更改为 overflow-y: hidden;

这里是小部件的jsfiddle...请记住这是我的第一个小部件，但请随时评论或就改进或错误提供建议...撕掉我的代码！

【问题讨论】：

标签： jquery jquery-ui combobox scrollbar

【解决方案1】：

所以这就是我为使其正常工作所做的工作...可能不是最好的解决方案，但它可以完成工作...

CSS...

.ui-combobox .ui-autocomplete{
    max-height: 1000px; 
    overflow-x: hidden; /* horizontal scrollbar */
    overflow-y: hidden; /* vertical scrollbar */
    z-index: 1000 !important;
}

JS...

"wheel .ui-menu":function(event){
    var scrollTopMenu=this.uiMenu.scrollTop(),
scrollHeight=Math.round(this.menuItemHeight);

if (event.originalEvent.deltaY<0){
    this.uiMenu.scrollTop(scrollTopMenu-scrollHeight);
}else{
    this.uiMenu.scrollTop(scrollTopMenu+scrollHeight);
}

return false;
},

我如何获得this.menuItemHeight...

uiMenuItemLineHeight=parseFloat($('.ui-menu .ui-menu-item a').css('line-height')),
uiMenuItemPadding=parseFloat($('.ui-menu .ui-menu-item a').css('padding-top')),
uiMenuItemTopBorder=parseFloat($uiMenu.css('border-top-width')),
uiMenuItemBtmBorder=parseFloat($uiMenu.css('border-bottom-width')),
menuItemHeight=uiMenuItemLineHeight+uiMenuItemPadding+uiMenuItemTopBorder+uiMenuItemBtmBorder, menuUserHeight=menuUserItems*menuItemHeight,

所以现在我可以毫无问题地滚动...但是我仍然没有滚动条，因为用户无法判断列表中的项目是否比可见的多...所以我想出了这个解决方案...我要做的是检查菜单是否比下拉菜单长，如果是，我只是将光标设置为不同的光标样式，让用户知道该字段可以滚动...我会最终制作一个更能代表能够滚动的自定义光标。

if(menuElementHeight>menuHeight){
    $uiMenu.css('cursor', 'context-menu');
}

我将继续努力在其中添加滚动条，但现在这对我有用，希望它可以帮助某人。

这是工作jsfiddle的链接

【讨论】：