# Customizing a scrollbar.

**URL:** <https://community.hubspot.com/t/customizing-a-scrollbar/2039>\
**Category:** CMS Development\
**Created:** [May 15, 2017, 4:56pm UTC](https://community.hubspot.com/t/customizing-a-scrollbar/2039 "2017-05-15T16:56:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ohhcoconut](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ohhcoconut/32/1996_2.png) [@Ohhcoconut](https://community.hubspot.com/u/Ohhcoconut)\
**Post date:** [May 15, 2017, 4:56pm UTC](https://community.hubspot.com/t/customizing-a-scrollbar/2039/1 "2017-05-15T16:56:33Z")

</div>

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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/1/51ff75df40595be9bcc238b5fc886d16d0a99156.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\*/

---

<div class="post-metadata">

**Author:** ![Jsum](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jsum/32/20405_2.png) [@Jsum](https://community.hubspot.com/u/Jsum)\
**Post date:** [May 16, 2017, 5:00pm UTC](https://community.hubspot.com/t/customizing-a-scrollbar/2039/2 "2017-05-16T17:00:50Z")

</div>

@Ohhcoconut check this out: [http://codepen.io/devstreak/pen/dMYgeO](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.

---

<div class="post-metadata">

**Author:** ![stefen](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stefen/32/29274_2.png) [@stefen](https://community.hubspot.com/u/stefen)\
**Post date:** [May 16, 2017, 5:58pm UTC](https://community.hubspot.com/t/customizing-a-scrollbar/2039/3 "2017-05-16T17:58:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Ohhcoconut](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ohhcoconut/32/1996_2.png) [@Ohhcoconut](https://community.hubspot.com/u/Ohhcoconut)\
**Post date:** [May 26, 2017, 4:18pm UTC](https://community.hubspot.com/t/customizing-a-scrollbar/2039/4 "2017-05-26T16:18:47Z")

</div>

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.