webkit scrollbar css unsupported by ie

Question

For styling scrollbar (of ul) I have used css. .requestType is the class of ul.

css I used is -

.requestType{
height:600px;  overflow-y: scroll; }    

.requestType::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5; }

.requestType::-webkit-scrollbar { width: 5px;   background-color: #F5F5F5; }

.requestType::-webkit-scrollbar-thumb{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: darkgray;   }

.list-group {
    display: flow-root; }

It works fine in chrome.

But in case of IE and mozilla firefox it applies simple scrollbar without styling it.

What should I do for styling scrollbar in IE AND mozilla firefox also.

 <ul class="list-group mb-3 requestType" id="requestType">

            <li class="list-group-item d-flex justify-content-between bg-light">
              <div class="text-success">
                <label class="Request_type" for="radio4">abc
                  <input type="radio" name="radio" value="abc" id="radio4">
                  <span class="checkmark"></span>
                  <h5><small class="text-muted">Brief description</small></h5>
                </label>
              </div>

            </li>

            <li class="list-group-item d-flex justify-content-between bg-light">
              <div class="text-success">

                <label class="Request_type" for="radio6">xyz
                  <input type="radio" name="radio" value="xyz" id="radio6">
                  <span class="checkmark"></span>
                  <h5><small class="text-muted">Brief description</small></h5>
                </label>
              </div>

            </li>

First of all leave IE, It does not support most of the current technology since microsoft depricated it. — Krishanu, Sep 10 '18 at 10:16

score 1 · Answer 1 · answered Sep 10 '18 at 10:21

Welcome to the world of UX and UI! Browser Support Matrix's are great to have for such issues, you can use them to define what and how items are viewed when your application is viewed in different browsers - or devices such as IPad, Mobile etc.

You can provide else statements for views to then display a certain view if the user is viewing the site in chrome for example and another view for IE. This may be an option for you.

Alternatively, you could produce a stylesheet compatible with all browsers - here is a quick list of CSS properties not compatible with IE https://www.impressivewebs.com/10-useful-css-properties-not-supported-by-internet-explorer/

Hope this helps!

score 1 · Answer 2 · answered Sep 10 '18 at 10:22

IE and Moziila just don't support it. The way to have a cool scrollbar is to use a library for the purpose, you can look up some jquery based plugging or npm package like this one perfect-scrollbar. The other way is to do one from scratch with vanilla js and some css (Keep in mind that all scroll involving action are taxing).

webkit scrollbar css unsupported by ie

2 Answers2