Browser Dependent Scrollbar Behavior (IE11 vs. Chrome) in JSAPI 3.x

Arne_Gelfert

Cross-posting for different audience from here.

How do I fix a strange looking and unresponsive scrollbar in Search widget, i.e. a scrollbar that disappears when clicked on. I thought I was missing some parameter. But when I switched from Chrome to IE, I realize it's all browser related.

The following works in IE but not in Chrome:

<SPAN class="comment token">// This is part of custom widget for Web Appbuilder, thus 3.x</SPAN>

<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>mySearch <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Search</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          sources<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN> <SPAN class="operator token"><</SPAN>list <SPAN class="keyword token">of</SPAN> sources<SPAN class="operator token">></SPAN> <SPAN class="punctuation token">]</SPAN> <SPAN class="punctuation token">,</SPAN>
          map<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">,</SPAN>
          popupEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
          autoSelect<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN> 
          enableSourcesMenu<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
          enableSuggestions<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
          maxSuggestions<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">5</SPAN><SPAN class="punctuation token">,</SPAN>
          allPlaceholder<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Example: John Wayne"</SPAN><SPAN class="punctuation token">,</SPAN>
          autoNavigate<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"mySearch"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>mySearch<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

I have found that I can tweak the scrollbar look (width/color) by overriding parameters in :

<SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;">::-webkit-scrollbar</SPAN><SPAN style="color: #000000;"> </SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">{</SPAN><SPAN style="color: #000000;">
&nbsp; </SPAN><SPAN style="color: #990000;">...</SPAN><SPAN style="color: #000000;">
</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">}</SPAN>

But what is the work-around for the click-on-scrollbar behavior? Thanks.