Webkit Scrollbar CSS, Always a White Box in Corner

Webkit scrollbar CSS, always a white box in corner

While the answer provided by E.C.Pabon was technically correct, the real error was Chrome 50 on x64 Linux had a bug with GTK integration. As of Chrome 51, the issue has been fixed.

How can I color the white corner with webkit-scrollbar?

You have to set the ::-webkit-scrollbar-corner pseudo-element, e.g.

::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5); }

CSS: How to change the color of the bottom right square of the scrollbar in webkit?

Ah, never mind:

Answer found here

::-webkit-scrollbar-corner {
/*
background-image: url(resources/corner.png);
background-repeat: no-repeat;
*/
background-color: #3D3D3D;
}

Hiding the scroll bar on an HTML page

Set overflow: hidden; on the body tag like this:

<style type="text/css">
    body {
        overflow: hidden;
    }
</style>

The code above "hides" both the horizontal and vertical scrollbars.

If you want to hide only the vertical scrollbar, use overflow-y:

<style type="text/css">
    body {
        overflow-y: hidden;
    }
</style>

And if you want to hide only the horizontal scrollbar, use overflow-x:

<style type="text/css">
    body {
        overflow-x: hidden;
    }
</style>

Content is clipped if necessary to fit the padding box. No scrollbars are provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed. The content can be scrolled programmatically (for example, by setting the value of a property such as offsetLeft), so the element is still a scroll container. _(source)

web kit scrollbar not chaging until i hover over it when changing themes

To force the browser to repaint the complete DOM just do $("#body").offset().Top; ( body is the ID given to body tag to speed up the selector )

A simple approach to your task can be just add a attribute disabled="disabled" to your link element

Include LINK in HEAD section as :

<link href="./carbon.css" rel="stylesheet" type="text/css" id="carbonCSS" />
<link href="./quartz.css" rel="stylesheet" type="text/css" id="quartzCSS" disabled="disabled" />

Include Script Below the link as :

 <script   type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script type="text/javascript">
      $(document).ready(function() {
            $('#nav li').on('click', function(){
                    objLink = document.getElementById($(this).attr("data-href"))
                    $("#carbonCSS , #quartzCSS").attr("disabled","disabled");
                    $("#body").offset().Top;  // Force Repaint
                    objLink.removeAttribute("disabled");
                }); 
        });
 </script>

Complete html page may look like :

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

  <link href="./carbon.css" rel="stylesheet" type="text/css" id="carbonCSS" />
  <link href="./quartz.css" rel="stylesheet" type="text/css" id="quartzCSS" disabled="disabled" />

   <script   type="text/javascript" src="./jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
            $('#nav li').on('click', function(){
                    objLink = document.getElementById($(this).attr("data-href"))
                    $("#carbonCSS , #quartzCSS").attr("disabled","disabled");
                    $("#body").offset().Top;
                    objLink.removeAttribute("disabled");
                }); 
        });
    </script>
   </head>
<body id="body">
 <ul id="nav">
    <li id="carbonTheme" data-href="carbonCSS">carbon Theme </li>
    <li id="quartzTheme" data-href="quartzCSS">Quartz Theme </li>
 </ul>      
  <div> 
           <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p><p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p><p>There are no results</p>
            <p>There are no results</p>

            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
           <p></p>
           <p></p><p></p><p></p><p></p><p></p>
           <p></p><p></p><p></p><p></p><p></p>
           <p></p><p></p><p></p><p></p><p></p>
           <p></p><p></p><p></p><p></p><p></p>
           <p></p>

            </div>
</body>
</html>

Make scroll bar take no space / prevent layout shift

There's no way to make a scrollbar appear on top of your content without using shady hacks, and it's not the best idea anyways since it will affect the usability of your app. If the scroll bar is over the content, it's likely to hide links/text/etc.

Your page ideally should be styled in such a way that it adapts to different browser/page widths without breaking. Especially with just a little scroll bar.

Anyways, here's a workaround that may help:

html {
    overflow-y: scroll;
}

Adding this style will make sure the scroll bar track is always present, and will also help avoid "jumpy" pages when a scrollbar appears/disappears. Again, the real solution is to use a flexible layout.

As a side note, styling the scrollbar is generally not recommended. It doesn't work cross-browser and will usually be ignored completely.

Chrome: custom scrollbar problem when both scroll bars are applied

a hacky solution is to add some box-shadow to cover this part:

::-webkit-scrollbar-thumb:horizontal {
  box-shadow: 3px 0 0 0;
}
::-webkit-scrollbar-thumb:vertical {
  box-shadow: 0 3px 0 0;
}

body { background-color: #fff }

section {
  background-color: #f8f8f8;
  width: 400px;
  height: 200px;
  padding: 10px;
  overflow: overlay;
}

.force-overflow {
  background-image: linear-gradient(45deg, orange, yellow, orange);
  height: 800px;
  width: 1200px;
}

::-webkit-scrollbar {
  background-color: #F5F5F5;
  height: 10px;
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: #F5F5F5;
  box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb {
  background: #999;
  color:#999;
  transition-duration: 2s;
}
::-webkit-scrollbar-thumb:horizontal {
  box-shadow: 3px 0 0 0;
}
::-webkit-scrollbar-thumb:vertical {
  box-shadow: 0 3px 0 0;
}

::-webkit-scrollbar-thumb:hover {
  background: #444;
  color:#444;
  transition-duration: 2s;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

<section>
  <div class="force-overflow"></div>
</section>

Webkit Scrollbar CSS, Always a White Box in Corner