CMS Development

Ohhcoconut
Contributor

Customizing a scrollbar.

SOLVE

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

 

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*/

0 Upvotes
1 Accepted solution
Ohhcoconut
Solution
Contributor

Customizing a scrollbar.

SOLVE

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.

View solution in original post

0 Upvotes
3 Replies 3
Jsum
Key Advisor

Customizing a scrollbar.

SOLVE

@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.

Ohhcoconut
Solution
Contributor

Customizing a scrollbar.

SOLVE

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.

0 Upvotes
stefen
Key Advisor | Partner
Key Advisor | Partner

Customizing a scrollbar.

SOLVE

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... ¯\_(ツ)_/¯

Stefen Phelps, Community Champion, Kelp Web Developer
0 Upvotes