Jump to content

The custom scroll bar covers edges and goes all the way to the menu


Il Domandatore
 Share

Recommended Posts

I created the scroll bars customized with the colors of the website. I added a border to the oval to move the scroll bar to give it a padding effect. This border covers the edge of the scroll bar. The scroll bar is inexplicably next to the menu. Why does the size of the oval change?

    /* Scrollbar width and color on Chrome. */
::-webkit-scrollbar {
    width: 66px;
    background: #3b633b;
}

/* Adds a border to the sidebar on hover. */
::-webkit-scrollbar:hover {
  border: 3px solid #000000 !important;
}

/* Style of the button and the board, in the scroll bar on Chrome. */
::-webkit-scrollbar-thumb {
    background: #000000 !important;
    height: 88px !important;
    border-radius: 99px !important;
      border: 11px solid #3b633b;
}

https://postimg.cc/gallery/cxFk3Lz

Link to comment
Share on other sites

The oval appears to be exactly the width of the scrollbar area, 66 pixels as given in your CSS. It has a border within it which is colored the same as the background, which makes it appear smaller, but it still is 66 pixels.

The scrollbar rectangle is also 66 pixels wide, even when the black border occupies 4 pixels of space within those 66 pixels.

There isn't a way to prevent this, the borders are always rendered within the bounding box in the scrollbar DOM.

Link to comment
Share on other sites

You can't prevent the edges being covered by the oval. The best solution is to not give it a black border. Try highlighting it by changing the background color (and oval border color) instead.

To fix the problem of the menu overlapping the scrollbar, give the menu a right margin of 66px. The problem is that your menu hasĀ  been taken out of the document flow, so it is in front of the rest of the document which includes the scrollbar.

Link to comment
Share on other sites

The border is an important accessibility requirement. I set the site that on hover there are 3px black borders. Changing color would cause color accessibility problems.
I use 4 colors;
- Black
- Dark green
- Light green
- White (only for text fields and not combined with light green).

I have removed any color changes on hover, because I find them terrible for accessibility. Visible? Even too much....

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...