How to remove the arrows in a scroll bar through CSS

Question

Generally in a scroll bar there will be up and down arrows at both ends in a vertical scroll bar.

Is there anyway to remove it so that only the scroll bar appears and not the arrows at both ends. Below is my CSS:

.scrollbar-vertical
{
    top: 0;
    right: 0;
    width: 17px;
    height: 100%;
    overflow-x: hidden;
    scrollbar-3dlight-color:#999;
    scrollbar-arrow-color:white;
    scrollbar-base-color:white;
    scrollbar-face-color:#999;
    border-radius:5px 5px; 
}

If I understood correctly, you're trying to obtain a custom scrollbar, that is still able to scroll the page, right? If that is the case, I recommend https://github.com/inuyaksa/jquery.nicescroll It's very customizable and works on mobile devices as well. — , Jul 20 '13 at 04:18
Possible solution here: http://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div — , Jul 20 '13 at 04:19
You could also try this one: http://manos.malihu.gr/tuts/custom-scrollbar-plugin/complete_examples.html — Miro, Jul 20 '13 at 07:04

score 6 · Accepted Answer · edited May 28 '20 at 18:57

By Assuming that you want to customize the browser scrollbar,

You can do this easily with some nice Jquery Plugins, or you can do the magic with css. But it only works on webkit browsers for now, Here is how

::-webkit-scrollbar {
    width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

Source: http://css-tricks.com/custom-scrollbars-in-webkit/

Else you can use a plugin. (Recommended)

As in an early comment, i suggest you use the niceScroller Plugin. That's nice and easy.

Source : http://areaaperta.com/nicescroll/

Simple Implementation

<script> 

     $(document).ready(

      function() { 

        $("html").niceScroll();

      }

    );

</script>

score 0 · Answer 2 · answered Feb 15 '18 at 09:16

You can use below style in your css to hide scrollbar arrows,

::-moz-scrollbar-button:decrement,
::-moz-scrollbar-button:increment,
::-webkit-scrollbar-button:decrement,
::-webkit-scrollbar-button:increment {
  width: 0px;
}

or

::-moz-scrollbar-button, ::-webkit-scrollbar-button {
  width: 0px;
}

score 0 · Answer 3 · answered Jul 21 '23 at 12:59

0

This works for me in all css states. The track fills the empty space left behind from the buttons

::webkit-scrollbar-button { 
     display:none;
    }

answered Jul 21 '23 at 12:59

Kondrup

1
1

score 0 · Answer 4 · answered Aug 04 '23 at 09:15

0

In my case, this how I've fixed it :

::-webkit-scrollbar-button {
   height: 0;
   width: 0
}

answered Aug 04 '23 at 09:15

Atlas-Pio

1,063
11
26

score -3 · Answer 5 · answered Jul 20 '13 at 04:15

-3

visibility: collapse !important;

maybe ?

answered Jul 20 '13 at 04:15

Mini John

7,855
9
59
108

Dont think so. I fi give that even the actual scroll bar bar does not show up. I just want the up and down arrows not to be shown. – ckv Jul 20 '13 at 04:18
@ckv Go with the javascript-based solution I recommend in my 1st comment, you'll save yourself a lot of trouble. See Revolt's comment for details why. – Jul 20 '13 at 04:21

How to remove the arrows in a scroll bar through CSS

5 Answers5

Linked