Using locomotive-scroll overrides the default scrollbar. But the one its replaced with seems broken.
It looks like its being scrolled itself. In the code pen, I have left everything default apart from scrollbar width to make it easier to see. I know I am missing something. Can anyone help me understand why its broken. thanks
code pen : https://codepen.io/P-Mattie/pen/rNgaYRq
I tried stripping it down to out of the box locomotive. And Its broken. I feel like its a data attribute or something I didn’t include.
<html lang="en">
<body data-scroll-container>
<div class="red box"></div>
<div class="blue box"></div>
<div class="red box"></div>
<div class="blue box"></div>
</body>
</html>
import LocomotiveScroll from "https://esm.sh/locomotive-scroll";
const scroll = new LocomotiveScroll({
el: document.querySelector("[data-scroll-container]"),
smooth: true,
scrollFromAnywhere: true,
});
* {
margin: 0;
padding: 0%;
}
.box {
width: 100vw;
height: 80vh;
}
.red {
background-color: rgb(255, 175, 175);
}
.blue {
background-color: rgb(147, 147, 255);
}
/* locomotive base css */
/*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
overflow: hidden;
}
html.has-scroll-dragging {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.has-scroll-smooth body {
overflow: hidden;
}
.has-scroll-smooth [data-scroll-container] {
min-height: 100vh;
}
[data-scroll-direction="horizontal"] [data-scroll-container] {
height: 100vh;
display: inline-block;
white-space: nowrap;
}
[data-scroll-direction="horizontal"] [data-scroll-section] {
display: inline-block;
vertical-align: top;
white-space: nowrap;
height: 100%;
}
.c-scrollbar {
position: absolute;
right: 0;
top: 0;
width: 11px;
height: 100%;
transform-origin: center right;
transition: transform 0.3s, opacity 0.3s;
opacity: 1;
}
.c-scrollbar:hover {
transform: scaleX(1.45);
}
.c-scrollbar:hover,
.has-scroll-scrolling .c-scrollbar,
.has-scroll-dragging .c-scrollbar {
opacity: 1;
}
[data-scroll-direction="horizontal"] .c-scrollbar {
width: 100%;
height: 10px;
top: auto;
bottom: 0;
transform: scaleY(1);
}
[data-scroll-direction="horizontal"] .c-scrollbar:hover {
transform: scaleY(1.3);
}
.c-scrollbar_thumb {
position: absolute;
top: 0;
right: 0;
background-color: black;
opacity: 1;
width: 20px;
border-radius: 10px;
margin: 2px;
cursor: -webkit-grab;
cursor: grab;
}
.has-scroll-dragging .c-scrollbar_thumb {
cursor: -webkit-grabbing;
cursor: grabbing;
}
[data-scroll-direction="horizontal"] .c-scrollbar_thumb {
right: auto;
bottom: 0;
}
New contributor
mateusz ptasinski is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.