Webkit Scroll Bar Configuration Help

  • 1
  • Question
  • Updated 7 years ago
  • Answered
Recently I have incorporated a custom scrollbar into my websites. They work great, with the only problem being that there is a black 'bar' running just right of the scroll piece.

Here is on of my websites that displays the problem:

Before viewing, be sure to use a webkit-based browser like Google Chrome, Chromium, Safari, or Webkit.

www.lazure.552clan.com (If that link doesn't work, use www.lazure.552industries.com)

Here is the CSS used to create the custom scrollbar:


body {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 10px;
overflow-y: scroll;
overflow-x: hidden;
}
html {
overflow-y: auto;
background-color: transparent;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
height: 30px;
display: block;
background-color: transparent;
}
::-webkit-scrollbar-track-piece {
background-color: transparent;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #666;
border: 1px solid #666;
-webkit-border-radius: 6px;
#toggle-view {
list-style:none;
font-family:arial;
font-size:11px;
margin:0;
padding:0;
width:300px;
}
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
  • indifferent

Posted 7 years ago

  • 1
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Michael,

I am referring your question to our HTML team. Please allow them 48 hours to respond to your inquiry.
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
Thank you! How will they be contacting me? Via email, or this post?
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
They'll get back to you here unless they need to discuss personal account details with you.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Just thought that I would add that the Media Portal does not load - this could be because of the code that you used for the page transition that Nathan gave to you. This affects Lightboxes - and stops them from loading.

Just thought that I would let you know. Other than that, very well done on the site!

Kind Regards,
Andi
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
Thanks for the compliment! (I'll just add you to the list... :D )

The problem you have mentioned is known. The "Media Portal" button is only there to act as a category container for the sub buttons that have real links. By default, these types of buttons are linked with the URL "552industries.com/some-page.php#" instead of a real, physical page. This is the same with other buttons such as "Recruitment", "Reference", and "Administration"

I am working to fix this, however that is low on my priority list with domain hopping and web service transitions. Not to mention my organization requires administration other than web development.

By the way I was looking at some of your websites, and I noticed the Ubuntu font used. Do you use Ubuntu? :)
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
Hey Laura -

Take a look at this. (Links open in new tab.)

Blank page
Home page with scripts, etc.

Notice something different? On the blank page with no extra content in it, my scrollbar renders perfectly. However, on the home page with multiple scripts, plugins, and other stuff, it doesn't render correctly.

Please re-instruct the HTML team to look for any script that may be interfering with the rendering of the scroll bar instead of only observing the CSS. I will be also working 'guess-and-check' style to see what is interfering with the scroll bar.

I know what is causing the problem. The 'fade in' page loading effect that I have on every page is somehow interfering with my custom scrollbar. What is the problem between the two plugins?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Michael,

Thanks for your patience. The issue with the code seems to be with this part located in your first HTML Widget:

<!--<style type="text/css">
html {
background-color:#000000;
}
</style>
<link href='http://fonts.googleapis.com/css?famil...' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
font-family: 'Ubuntu', arial, sans-serif !important;
}
</style>-->

If you change the background color to none, then the black strip disappears.

If you need any further assistance, please let me know.
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
I just figured out that the CSS style section was causing the trouble.

A tip just in case you didn't know - for posting code of any sort, you don't have to add <!-- and --> when using GetSatisfaction.

You can use these tags: (code) and (/code) when entering code. Substitute the parenthesis. With < and >.

The resulting code will look like this. <style type="text/css">
html {
background-color:#000000;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Ubuntu&v1' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
font-family: 'Ubuntu', arial, sans-serif !important;
}
</style>