Perfect Scrollbar on whole site (html/body)

[Georgich]

Hi, guys! Is it possible to use prefect scrollbar on whole website? I want to disable native browser scrollbar and use cornerstone style of it )) it’s sexy )

[friech]

Hi Philipp,

Thank you for writing in, while that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

Please follow the guide the provided on the following link for styling an scrollbar.

• https://css-tricks.com/almanac/properties/s/scrollbar/
• https://css-tricks.com/the-current-state-of-styling-scrollbars/

Hope it helps,
Cheers!

[Georgich]

My code now is:

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

::-webkit-scrollbar-thumb {
  height: 6px;
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  -webkit-border-radius: 7px;
  background-color: #e3e3e3;
}

Dat did the trick. But i’ve found that webkit-scrollbar pseudo element got none of values like “position”, so it cannot just be transparent (overlays whole page, not a custom div) and shows “above everything” . So, to achieve effect i needed i probably need to use jquery scroll bar or plugin with it (https://ru.wordpress.org/plugins/custom-scrollbar/). I think, i need to remove default webkit scrollbar with “display: none”. BUT, the jquery custom scrollbar is applied to a custom class but not for a whole html…

[christian]

Hey Philipp,

Thanks for detailing your experience. Regretfully, the support forum is not the right channel to be discussing third-party plugin or code integration.

You might want to post this in the Peer to Peer forum instead.

Thanks.

[Georgich]

Thanks a lot!

[christian]

You’re welcome.