如何解决滚动方向错误机车滚动
我正在尝试实现与本示例相同的滚动效果。
根据文档,我添加了data-scroll-direction =“ horizontal”,但是其方向相反,在向下滚动时它从右向左移动,但应该以其他方式移动。也没有得到如何用js控制transform,translateX / translateY吗?如果我想要自定义轨迹怎么办?
HTML:
<main data-scroll-container>
<section class="is-inview" id="top-section" data-scroll>
</section>
<section class="is-inview" data-scroll id="rocket-section">
<div class="direction-block" style="position: absolute;right: 0;left: 0;z-index: 1;">
<div style="top:33%;">
<div data-scroll-direction="horizontal" data-scroll-direction="bottom" data-scroll-speed="15"
data-scroll id="rocket-ship">?
</div>
</div>
</div>
</section>
</main>
JS:
const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),class: 'is-inview',smooth: true,getDirection: true
const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),getDirection: true
// lerp: 0.1,});
scroll.update();
/* !locomotive-scrollv3.6.1|MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
overflow: hidden;
position: relative;
}
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;
}
.c-scrollbar {
position: absolute;
right: 0;
top: 0;
width: 11px;
height: 100%;
transform-origin: center right;
transition: transform 0.3s,opacity 0.3s;
opacity: 0;
}
.c-scrollbar:hover {
transform: scaleX(1.45);
}
.c-scrollbar:hover,.has-scroll-scrolling .c-scrollbar,.has-scroll-dragging .c-scrollbar {
opacity: 1;
}
.c-scrollbar_thumb {
position: absolute;
top: 0;
right: 0;
background-color: #000000;
opacity: 0.5;
width: 7px;
border-radius: 10px;
margin: 2px;
cursor: -webkit-grab;
cursor: grab;
}
.has-scroll-dragging .c-scrollbar_thumb {
cursor: -webkit-grabbing;
cursor: grabbing;
}
section {
width: 100%;
height: 100vh;
padding: 1em;
position: relative;
background-color: #000000;
}
#rocket-ship {
position: relative;
font-size: 100px;
}
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>
<main data-scroll-container>
<section class="is-inview" id="top-section" data-scroll>
</section>
<section class="is-inview" data-scroll id="rocket-section">
<div class="direction-block" style="position: absolute;right: 0;left: 0;z-index: 1;">
<div style="top:33%;">
<div data-scroll-direction="horizontal" data-scroll-direction="bottom" data-scroll-speed="15"
data-scroll id="rocket-ship">?
</div>
</div>
</div>
</section>
</main>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。