コンボボックスのAutocomplete利用時、スクロールバーのボタンの動作がおかしい

コンボボックスでAutocompleteを利用するために、下記を参考にしています。
http://www.northwind.mydns.jp/samples/autocomplete_sample1.php

表示するサイズを指定したく、下記ＣＳＳの記載を追加したところ
コンボボックスにスクロールバーが表示されたのですが、
なぜかスクロールバーの上下にあるボタン（三角形のマーク）を押すと、リストの一番上に戻ってしまいます。

css
1.ui-autocomplete {
2     max-height: 100px;
3     overflow-y: scroll;
4     overflow-x: hidden;
5     padding-right: 20px;
6}

具体的な動作は下記となります。

① マウスホイールで途中までスクロールした後、スクロールバー上下のボタンを押すとスクロールが一番上に移動する
② ①で下のボタンを押し続けた場合は下にスクロールされる
③ マウスホイールや、バーをドラッグで移動する動作は正常

通常の動作（現在スクロールしているところから上・下に少しずつ移動していく動作）にしたいのですが、修正できないでしょうか？

追記
コードは記載したｃｓｓのみ追加しています。少し長くなりますが下記で発生します

html
1<html>
2<head>
3<base target="_self" />
4<link rel="stylesheet" href="../script/default/jquery-ui.css" />
5<script type="text/javascript" src="../script/default/jquery-3.2.1.js"></script>
6<script type="text/javascript" src="../script/default/jquery-ui.min.js"></script>
7<SCRIPT language="JavaScript">
8//----ここから参考ＵＲＬの上部ソースを丸々---
9$(function() {
10$.widget( "my.comboboxex", {
11
12//~中略~
13
14$("#cbox").comboboxex();
15
16});
17//----ここまで参考ＵＲＬの上部ソース---
18</script>
19<style type="text/css">
20
21.ui-autocomplete {
22     max-height: 100px;
23     overflow-y: auto;
24     overflow-x: hidden;
25     padding-right: 20px;
26}
27
28</style>
29</head>
30<div>
31    <select id="cbox" class="comboboxex" >
32      <option value="">選択してください</option>
33      <option value="1">1</option>
34      <option value="2">2</option>
35      <option value="3">3</option>
36      <option value="4">4</option>
37      <option value="5">5</option>
38      <option value="6">6</option>
39      <option value="7">7</option>
40      <option value="8">8</option>
41      <option value="9">9</option>
42      <option value="10">10</option>
43      <option value="11">11</option>
44      <option value="12">12</option>
45      <option value="13">13</option>
46      <option value="14">14</option>
47      <option value="15">15</option>
48      <option value="16">16</option>
49      <option value="17">17</option>
50      <option value="18">18</option>
51      <option value="19">19</option>
52      <option value="20">20</option>
53    </select>
54</div>
55</html>
56

動作環境はIE11（11.0.42）となります

m.ts10806

2017/06/08 01:32

HTML部分やJS部分も念のためご提示いただけますか？参考URLからどこをどう変えたとか、変えた後のコードがあれば分かりやすいです。また、プログラムコードは```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）

teketeke8

2017/06/08 06:26

コメントありがとうございます。不慣れなものですみません・・・。追記しましたので、宜しければ見ていただけるとありがたいです。

x_x

2017/06/12 03:17

Chrome では再現しませんでしたが、たしかに IE ではおかしいですね。ということで動作環境も明記したほうがいいかもしれません。

行動規範の内容に同意します

回答1件

ベストアンサー

解決方法を見つけました。
https://stackoverflow.com/questions/19656689/jquery-combobox-with-autocomplete-scrolls-to-top-in-ie

問題は jQuery UI (Autocomplete が使っている ui.menu) にあるようです。
詳細はぜひリンク先を参照して確認してほしいのですが、とりあえず対症療法としては、以下コードを _createAutocomplete の最後に追加することです。

JavaScript
1    var menu = $(this.input.autocomplete("widget")).data("ui-menu");
2    var originalScrollIntoView = menu._scrollIntoView;
3    menu._scrollIntoView = function (item) {
4        if (this._hasScroll()) {
5            borderTop = parseFloat($.css(this.activeMenu[0], "borderTopWidth")) || 0;
6            paddingTop = parseFloat($.css(this.activeMenu[0], "paddingTop")) || 0;
7            var offset = item.offset().top - this.activeMenu.offset().top - borderTop - paddingTop;
8            if (offset < 0) {
9                // Glitchy 'offset', do nothing.
10                return;
11            }
12        }
13        originalScrollIntoView.apply(this, arguments);
14    };