Локомотив-прокрутка, полоса прокрутки не работает правильно ⇐ CSS

[Anonymous]

Использование локомотивной прокрутки переопределяет полосу прокрутки по умолчанию. Но тот, на который он был заменен, кажется сломанным.
Похоже, что он сам прокручивается. В ручке кода я оставил все по умолчанию, кроме ширины полосы прокрутки, чтобы ее было легче увидеть. Я знаю, что мне что-то не хватает. Может кто-нибудь помочь мне понять, почему он сломан. спасибо
ручка кода: https://codepen.io/P-Mattie/pen/rNgaYRq
Я попробовал разобрать ее до локомотива из коробки. И он сломан. У меня такое ощущение, что это атрибут данных или что-то, что я не включил.






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;
}


Подробнее здесь: https://stackoverflow.com/questions/784 ... ning-right