<div class="scrollable-x"> </div>
<div class="scrollable-y"> </div>
<div class="scrollable-xy"> </div>
<div class="scrollbar-x"> </div>
<div class="scrollbar-y"> </div>
<div class="scrollbar-xy"> </div>
.scrollbar-x {
overflow-x: auto;
touch-action: pan-x;
white-space: nowrap;
}
.scrollbar-y {
overflow-y: auto;
touch-action: pan-y;
}
.scrollbar-xy {
overflow: auto;
touch-action: pan-x pan-y;
}
.scrollable-x {
overflow-x: auto;
touch-action: pan-x;
white-space: nowrap;
}
.scrollable-y {
overflow-y: auto;
touch-action: pan-y;
}
.scrollable-xy {
overflow: auto;
touch-action: pan-x pan-y;
}
.scrollable-x::-webkit-scrollbar,
.scrollable-y::-webkit-scrollbar,
.scrollable-xy::-webkit-scrollbar {
-webkit-appearance: none;
}
.scrollbar-x::-webkit-scrollbar,
.scrollbar-y::-webkit-scrollbar,
.scrollbar-xy::-webkit-scrollbar {
-webkit-appearance: none;
width: 20px;
height: 20px;
}
.scrollbar-x::-webkit-scrollbar-track,
.scrollbar-y::-webkit-scrollbar-track,
.scrollbar-xy::-webkit-scrollbar-track {
-webkit-appearance: none;
background-color: transparent;
box-shadow: inset 0 0 .5em .125em rgba(0,0,0,.5);
}
.scrollbar-x::-webkit-scrollbar-thumb,
.scrollbar-y::-webkit-scrollbar-thumb,
.scrollbar-xy::-webkit-scrollbar-thumb {
-webkit-appearance: none;
border: 5px solid transparent;
border-radius: 10px;
}
.scrollbar-x::-webkit-scrollbar-thumb,
.scrollbar-xy::-webkit-scrollbar-thumb:horizontal {
background:linear-gradient(to bottom, rgba(254, 156, 0, .8), rgba(254, 156, 0, .5));
background-clip: content-box;
}
.scrollbar-y::-webkit-scrollbar-thumb,
.scrollbar-xy::-webkit-scrollbar-thumb:vertical {
background:linear-gradient(to right, rgba(254, 156, 0, .8), rgba(254, 156, 0, .5));
background-clip: content-box;
}
.scrollbar-x::-webkit-scrollbar-button,
.scrollbar-y::-webkit-scrollbar-button,
.scrollbar-xy::-webkit-scrollbar-button {
-webkit-appearance: none;
background-repeat: no-repeat;
background-position: center;
box-shadow: inset .1em .1em .25em rgba(126,126,126,.1), inset -.1em -.1em .25em rgba(0,0,0,.2);
}
.scrollbar-x::-webkit-scrollbar-button,
.scrollbar-xy::-webkit-scrollbar-button:horizontal {
background-size: 6px 10px;
}
.scrollbar-y::-webkit-scrollbar-button,
.scrollbar-xy::-webkit-scrollbar-button:vertical {
background-size: 10px 6px;
}
.scrollbar-x::-webkit-scrollbar-button:start,
.scrollbar-xy::-webkit-scrollbar-button:horizontal:start {
background-image: url(../images/scroll_button_left_arrow_white.png);
}
.scrollbar-x::-webkit-scrollbar-button:end,
.scrollbar-xy::-webkit-scrollbar-button:horizontal:end {
background-image: url(../images/scroll_button_right_arrow_white.png);
}
.scrollbar-y::-webkit-scrollbar-button:start,
.scrollbar-xy::-webkit-scrollbar-button:vertical:start {
background-image: url(../images/scroll_button_up_arrow_white.png);
}
.scrollbar-y::-webkit-scrollbar-button:end,
.scrollbar-xy::-webkit-scrollbar-button:vertical:end {
background-image: url(../images/scroll_button_down_arrow_white.png);
}
.scrollable-x::-webkit-scrollbar-corner,
.scrollable-y::-webkit-scrollbar-corner,
.scrollable-xy::-webkit-scrollbar-corner {
-webkit-appearance: none;
}
.scrollbar-x::-webkit-scrollbar-corner,
.scrollbar-y::-webkit-scrollbar-corner,
.scrollbar-xy::-webkit-scrollbar-corner {
-webkit-appearance: none;
background-color: transparent;
box-shadow: inset 0 0 .5em .125em rgba(0,0,0,.5);
}