Customizing a scrollbar.

Develop, Build & Integrate CMS Development
1

Hi,

Hubspot worked with me to build this fantastic flipping box. They made it a custom module. I love everything about the flipping box except the scroll bar. (See attached)

Capture.PNG
Capture.PNG321×398 26.8 KB

Essentially the current scroll box is clunky and the classic rectangle.

I’ve done some research in editing the scroll bar and it requires a webkit code. However, every codepen or 3rd party site I explore for help doesn’t even have the format of scroll bar I want.

I’m essentially desiring the simple apple scroll bar: it’s invisible (the hubflip scrollbar doesn’t have to be invisible) until you scroll, then a smaller oval pops up and shows the placement on the page. I don’t want arrows on the top or the bottom either.

I have tried multiple times to figure out how to create a jsfiddle with my hubflip but got no where. Below is the code for the CSS. Hopefully this is the gist of what you need.

/* Flip Animation*/ /* entire container, keeps perspective */
.flip-container {
-webkit-perspective: 500;
-moz-perspective: 500;
-o-perspective: 500;
perspective: 500;
box-shadow: 5px 5px 15px #105656;
border: 1px solid #f5f5fb;
width: 280px;
height: 320px;
}

.flip-container:hover .flipper,
.flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.flip-container, .front, .back {
border-radius: 15px;
width: 280px;
height: 320px;
}

.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;

-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;

transition: 0.6s;
transform-style: preserve-3d;

position: relative;

}

.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
padding:10px;

position: absolute;
top: 0;
left: 0;
}

.front {
z-index: 2;
}

.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);

background: #f8f8f8;
}

.front .name {
font-size: 2em;
display: inline-block;
background: rgba(33, 33, 33, 0.9);
color: #f8f8f8;
font-family: Courier;
padding: 5px 10px;
border-radius: 5px;
bottom: 60px;
left: 25%;
position: absolute;
text-shadow: 0.1em 0.1em 0.05em #333;

-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}

.back-title {
font-weight: bold;
color: #00304a;
position: absolute;
top: 10px;
padding: 10px;
left: 0;
right: 0;
text-align: center;
text-shadow: 0.1em 0.1em 0.05em #acd7e5;
font-family: Courier;
letter-spacing: 1px;
font-size: 2em;
}

.back p {
position: absolute;
bottom: 25px;
left: 0;
right: 5px;
width: 100%;
text-size: 14px;
text-align: center;
padding: 0 20px;
font-family: helvetica;
line-height: 2em;
}

/*animation complete*/

2

@Ohhcoconut check this out: http://codepen.io/devstreak/pen/dMYgeO

Scroll bars fall in line with select inputs and other elements that are just a pain to work with across browsers. I home this helps.

3

I’d advise against styling the scrollbar or changing it’s default behavior. It’s style is determined by the operating system and it should be consistent so the end-user doesn’t have to think when they see a scrollbar whether or not it is indeed a scrollbar.

That being said, I do hate the look of Window’s scroll bars… ¯\_(ツ)_/¯

4

Codepen is the go-to for me for code, but I don’t like the styles of those scroll bars either. I’ve come to the conclusion that the only way to get the scroll bar I desire is for my customers to view my webpage on a mac instead of windows. Thanks for your help though.