I have a straight forward select box with 100 values in HTML, lets call the values 1-100 for simplicity.

Using Chrome on Windows, if a small value (e.g. 6) is selected, clicking on the value will show options 1 to 21 with a scrollbar on the right to move down to numbers beyond 21.

However, the behaviour is different when the currently selected value is larger, say 26. In that case it will show values 7-26 leaving the currently selected value of 26 at the bottom of the list.

This leads to a poor user experience as changing from 26 to 29 requires clicking on the scroll bar.

How can I get "centered" behaviour, i.e. if 26 is chosen, then 16-36 is displayed and the user can see neighbouring values without needing the scroll bar.

<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option selected>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>