Пользовательская полоса прокрутки для пользовательского jquery UI Combobox - PullRequest
Новая
       22

Пользовательская полоса прокрутки для пользовательского jquery UI Combobox

0 голосов
/ 05 марта 2020

Я некоторое время работал над виджетом со списком, и он работает так, как будто он мне тоже нужен ... так что теперь я хочу, чтобы он выглядел лучше, и мне хотелось бы изменить внешний вид полосы прокрутки. Я перепробовал почти все, что поиск мог найти без удачи. Эти 2 казались наиболее перспективными, простыми в реализации ...

пользовательская полоса прокрутки 1

пользовательская полоса прокрутки 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 для виджета ... пожалуйста, имейте в виду, что это мой первый виджет, но не стесняйтесь комментировать или давать предложения по улучшениям или ошибкам ... разорвите мой код!

1 Ответ

0 голосов
/ 20 марта 2020

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

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

...