CODEWITHSUNDEEP
htmlcss
ckv
ckv

Reputation: 10830

How to remove the arrows in a scroll bar through CSS

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; 
}

Upvotes: 19

Views: 56712

Answers (6)

Muhammad Bilawal
Muhammad Bilawal

Reputation: 474

I have skilfully crafted a cross-browser compatible custom scrollbar solution, ensuring a seamless blend of aesthetics and functionality, validated through thorough testing across multiple platforms.

.scrollbar {
  overflow-y: auto;
  overflow-x: hidden;
  width: 200px;
  height: 200px;
  padding: 10px;
  &::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8 !important;
  }
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(83, 83, 83, 0.07);
    background-color: #f1f1f1;
  }
  &::-webkit-scrollbar {
    width: 7px;
    background-color: #f1f1f1;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CodePen - CSS Scroll Bars</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <!-- partial:index.partial.html -->
  <div id="wrapper">
    <div class="scrollbar">
      asperiores, dolor magni culpa voluptas maiores? Quidem fuga illum consequuntur maxime eius sed, assumenda necessitatibus provident nostrum cupiditate odit animi laboriosam ipsum libero rerum voluptatem repellat dolores reprehenderit dolorem. Dolorum iusto
      nam nisi assumenda nihil harum quis sed veritatis debitis, pariatur provident aliquid eius, voluptatem repudiandae? Aperiam repellendus tempora ullam sapiente. Officia, quaerat! Voluptatum, fugit?
    </div>
  </div>

</body>
</html>

Upvotes: 2

Atlas-Pio
Atlas-Pio

Reputation: 1153

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

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

Upvotes: 0

Kondrup
Kondrup

Reputation: 1

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

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

Upvotes: 0

Dilusha Gonagala
Dilusha Gonagala

Reputation: 439

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>

Upvotes: 6

Shridhar Sagari
Shridhar Sagari

Reputation: 265

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;
}

Upvotes: 0

Mini John
Mini John

Reputation: 7941

visibility: collapse !important;

maybe ?

Upvotes: -4

Related Questions