64 lines
2.7 KiB
SCSS
64 lines
2.7 KiB
SCSS
html.has-smooth-scroll {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.o-scroll{
|
|
html.has-smooth-scroll & {
|
|
height: 100vh;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.scroll-content {
|
|
transform: translate3d(0,0,0);
|
|
margin: 0;
|
|
overflow: visible;
|
|
height: 100%;
|
|
}
|
|
|
|
// Scrollbar
|
|
// ==========================================================================
|
|
[data-scrollbar],[scrollbar],scrollbar{display:block;position:relative}[data-scrollbar] .scroll-content,[scrollbar] .scroll-content,scrollbar .scroll-content{-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}[data-scrollbar].sticky .scrollbar-track,[scrollbar].sticky .scrollbar-track,scrollbar.sticky .scrollbar-track{background:hsla(0,0%,87%,.75)}[data-scrollbar] .scrollbar-track,[scrollbar] .scrollbar-track,scrollbar .scrollbar-track{position:absolute;opacity:0;z-index:1;-webkit-transition:opacity .5s ease-out,background .5s ease-out;transition:opacity .5s ease-out,background .5s ease-out;background:none}[data-scrollbar] .scrollbar-track.show,[data-scrollbar] .scrollbar-track:hover,[scrollbar] .scrollbar-track.show,[scrollbar] .scrollbar-track:hover,scrollbar .scrollbar-track.show,scrollbar .scrollbar-track:hover{opacity:1}[data-scrollbar] .scrollbar-track:hover,[scrollbar] .scrollbar-track:hover,scrollbar .scrollbar-track:hover{background:hsla(0,0%,87%,.75)}[data-scrollbar] .scrollbar-track-x,[scrollbar] .scrollbar-track-x,scrollbar .scrollbar-track-x{bottom:0;left:0;width:100%;height:8px}[data-scrollbar] .scrollbar-track-y,[scrollbar] .scrollbar-track-y,scrollbar .scrollbar-track-y{top:0;right:0;width:8px;height:100%}[data-scrollbar] .scrollbar-thumb,[scrollbar] .scrollbar-thumb,scrollbar .scrollbar-thumb{position:absolute;top:0;left:0;width:8px;height:8px;background:rgba(0,0,0,.5);border-radius:4px}[data-scrollbar] .overscroll-glow,[scrollbar] .overscroll-glow,scrollbar .overscroll-glow{position:absolute;top:0;left:0;width:100%;height:100%}
|
|
|
|
.scrollbar-track {
|
|
user-select: none;
|
|
background-color: transparent !important;
|
|
width: 14px !important;
|
|
opacity: 0 !important;
|
|
z-index: 99999 !important;
|
|
|
|
.scrolling & {
|
|
opacity: 0.75 !important;
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 1 !important;
|
|
background-color: #fafafa !important;
|
|
}
|
|
}
|
|
|
|
.scrollbar-thumb {
|
|
position: relative;
|
|
width: 14px !important;
|
|
background-color: transparent !important;
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 3px;
|
|
right: 3px;
|
|
bottom: 3px;
|
|
left: 3px;
|
|
background-color: #c1c1c1;
|
|
border-radius: 4px;
|
|
transition: background-color $speed $easing;
|
|
}
|
|
|
|
&:hover {
|
|
&::after {
|
|
background-color: #7d7d7d;
|
|
}
|
|
}
|
|
}
|